itube-specs 0.0.904 → 0.0.910

package/assets/icons/common/playlist.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"></path><path d="M10 12H3"></path><path d="M10 19H3"></path><path d="M15 12.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997a1 1 0 0 1-1.517-.86z"></path></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12H3"></path><path d="M16 6H3"></path><path d="M12 18H3"></path><path d="m16 12 5 3-5 3v-6Z"></path></svg>

package/assets/scss/themes/dark/_theme.scss

@@ -43,7 +43,7 @@ $nav-border--hover: transparent;
 $nav-border: $color-zinc-700-50;
 $nav-icon: $color-zinc-400;
 $nav-icon-accent: $color-red-400;
-$nav-icon--active: $nav-text--active;
+$nav-icon--active: $color-zinc-400;
 $nav-container-bg: $color-black;
 $nav-down-icon: $color-zinc-500;
 $nav-menu-bg: $color-zinc-900;
@@ -105,7 +105,7 @@ $count-bg: $color-zinc-800;
 $count-text: $color-zinc-400;
 
 // ─── Search ───
-$search-bg: $color-zinc-800;
+$search-bg: $color-zinc-800-50;
 $search-text: $color-white;
 $search-bg--mobile: $color-zinc-800;
 $search-border--active--mobile: $color-indigo-500;
@@ -119,7 +119,7 @@ $search-button-bg: $color-indigo-600;
 $search-button-bg--hover: $color-indigo-500;
 $search-max-width: 500px;
 $search-max-width-md: 672px;
-$search-mobile-bg: $mono-black-95;
+$search-mobile-bg: $color-neutral-940-95;
 $search-mobile-border: $color-zinc-800;
 $search-mobile-decorate: $mono-black-50;
 $search-mobile-button: $color-zinc-200;
@@ -468,18 +468,29 @@ $dropdown-crest: $color-zinc-500;
 $dropdown-separator: $color-zinc-800-60;
 
 // ─── Snackbar ───
+$snackbar-bg: $color-zinc-800;
+$snackbar-border: $color-zinc-700;
 $snackbar-text: $color-zinc-200;
-$snackbar-close: $color-zinc-500;
-$snackbar-close--hover: $color-zinc-300;
-$snackbar-close-bg--hover: $color-zinc-700;
-$snackbar-success: $color-green-200;
-$snackbar-success-bg: $color-green-925;
-$snackbar-success-icon: $color-green-300;
-$snackbar-success-icon-bg: $color-green-800;
-$snackbar-error: $color-red-200;
-$snackbar-error-bg: $color-red-925;
-$snackbar-error-icon: $color-red-300;
-$snackbar-error-icon-bg: $color-red-800;
+$snackbar-highlight: $color-white;
+$snackbar-icon: $color-zinc-300;
+$snackbar-icon-bg: $color-zinc-700-60;
+$snackbar-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+$snackbar-action-bg: $color-indigo-600;
+$snackbar-action-bg--hover: $color-indigo-500;
+$snackbar-action-text: $color-white;
+
+// ─── Follow button ───
+$follow-btn-bg: $color-indigo-600;
+$follow-btn-bg--hover: $color-indigo-500;
+$follow-btn-border: $color-indigo-500;
+$follow-btn-border--hover: $color-indigo-500;
+$follow-btn-text: $color-white;
+$follow-btn-following-bg: $color-zinc-800;
+$follow-btn-following-bg--hover: $color-red-600;
+$follow-btn-following-border: $color-zinc-800;
+$follow-btn-following-border--hover: $color-red-500;
+$follow-btn-following-text: $color-white;
+$follow-btn-following-text--hover: $color-white;
 
 // ─── Button ───
 $button-primary-bg: $color-indigo-600;
@@ -854,6 +865,18 @@ $playlist-card-placeholder-bg: $color-zinc-700;
 $playlist-card-dropdown-icon: $color-zinc-500;
 $playlist-card-dropdown-icon--hover: $color-white;
 
+// ─── Collections section ───
+$collections-badge-text: $color-indigo-300;
+$collections-badge-bg: $color-indigo-500-20;
+$collections-badge-border: $color-indigo-500-40;
+$collections-more-bg: $color-zinc-800;
+$collections-more-border: $color-zinc-800-50;
+$collections-more-border--hover: $color-zinc-700;
+$collections-more-scrim: $color-black-50;
+$collections-more-scrim--hover: $color-black-42;
+$collections-more-count: $color-white;
+$collections-more-text: $color-zinc-200;
+
 // ─── Channel card ───
 $channel-card-border: $color-zinc-800-50;
 $channel-card-bg: $color-zinc-800-50;
@@ -986,7 +1009,6 @@ $library-item-badge-bordered-text: $color-zinc-400;
 // ─── Library feed (блок подписки: модель / канал / категория) ───
 $library-feed-bg: $color-zinc-900-40;
 $library-feed-border: $color-zinc-800;
-$library-feed-fade: $color-zinc-950;
 $library-feed-avatar-border: $color-zinc-700;
 $library-feed-avatar-border--hover: $color-zinc-500;
 $library-feed-initials: $color-zinc-400;

package/assets/scss/themes/light/_theme.scss

@@ -523,18 +523,29 @@ $dropdown-crest: $color-gray-400;
 $dropdown-separator: $color-slate-750;
 
 // ─── Snackbar ───
+$snackbar-bg: $color-slate-800;
+$snackbar-border: $color-slate-750;
 $snackbar-text: $color-gray-200;
-$snackbar-close: $color-gray-500;
-$snackbar-close--hover: $color-gray-300;
-$snackbar-close-bg--hover: $color-slate-700;
-$snackbar-success: $color-green-200;
-$snackbar-success-bg: $color-green-925;
-$snackbar-success-icon: $color-green-300;
-$snackbar-success-icon-bg: $color-green-800;
-$snackbar-error: $color-red-200;
-$snackbar-error-bg: $color-red-925;
-$snackbar-error-icon: $color-red-300;
-$snackbar-error-icon-bg: $color-red-800;
+$snackbar-highlight: $color-white;
+$snackbar-icon: $color-gray-300;
+$snackbar-icon-bg: $color-slate-700;
+$snackbar-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+$snackbar-action-bg: $color-indigo-600;
+$snackbar-action-bg--hover: $color-indigo-500;
+$snackbar-action-text: $color-white;
+
+// ─── Follow button ───
+$follow-btn-bg: $color-indigo-600;
+$follow-btn-bg--hover: $color-indigo-500;
+$follow-btn-border: $color-indigo-500;
+$follow-btn-border--hover: $color-indigo-500;
+$follow-btn-text: $color-white;
+$follow-btn-following-bg: $color-gray-300;
+$follow-btn-following-bg--hover: $color-red-500;
+$follow-btn-following-border: $color-gray-300;
+$follow-btn-following-border--hover: $color-red-500;
+$follow-btn-following-text: $color-gray-700;
+$follow-btn-following-text--hover: $color-white;
 
 // ─── Button ───
 $button-primary-bg: $color-indigo-600;
@@ -882,6 +893,18 @@ $playlist-card-placeholder-bg: $color-gray-300;
 $playlist-card-dropdown-icon: $color-gray-600;
 $playlist-card-dropdown-icon--hover: $color-gray-900;
 
+// ─── Collections section ───
+$collections-badge-text: $color-indigo-600;
+$collections-badge-bg: $color-indigo-500-10;
+$collections-badge-border: $color-indigo-500-20;
+$collections-more-bg: $color-gray-300;
+$collections-more-border: $color-gray-300;
+$collections-more-border--hover: $color-gray-400;
+$collections-more-scrim: $color-black-45;
+$collections-more-scrim--hover: $color-black-32;
+$collections-more-count: $color-white;
+$collections-more-text: $color-white;
+
 // ─── Channel card ───
 $channel-card-border: transparent;
 $channel-card-bg: $color-gray-100;
@@ -1014,7 +1037,6 @@ $library-item-badge-bordered-text: $color-gray-600;
 // ─── Library feed (блок подписки: модель / канал / категория) ───
 $library-feed-bg: $color-gray-100;
 $library-feed-border: transparent;
-$library-feed-fade: $color-gray-100;
 $library-feed-avatar-border: $color-gray-300;
 $library-feed-avatar-border--hover: $color-indigo-500-50;
 $library-feed-initials: $color-gray-600;

package/assets/scss/vars/_palette.scss

@@ -22,6 +22,7 @@ $color-zinc-750: lab(21.3843% .9572 -2.5207); // #333337
 $color-zinc-700: lab(26.8019% 1.35387 -4.68303); // #3f3f46
 $color-zinc-700-80: lab(26.8019% 1.35387 -4.68303 / 80%); // zinc-700 / 70%
 $color-zinc-700-70: lab(26.8019% 1.35387 -4.68303 / 70%); // zinc-700 / 70%
+$color-zinc-700-60: lab(26.8019% 1.35387 -4.68303 / 60%); // zinc-700 / 60%
 $color-zinc-700-50: lab(26.8019% 1.35387 -4.68303 / 50%); // zinc-700 / 50%
 $color-zinc-700-30: lab(26.8019% 1.35387 -4.68303 / 30%); // zinc-700 / 50%
 $color-zinc-650: lab(31.3256% 2.0703 -5.3354); // #494952
@@ -65,6 +66,10 @@ $color-indigo-800: lab(26.6645% 37.9804 -68.6402); // #372aac
 $color-indigo-900: lab(23.3911% 24.6978 -50.4718); // #312c85
 $color-indigo-950: lab(12.9255% 18.7583 -31.0075); // #1e1a4d
 
+// Neutral gray (untinted — no zinc blue tint)
+$color-neutral-940: lab(3.6355% 0 0); // #0d0d0d
+$color-neutral-940-95: lab(3.6355% 0 0 / 95%); // #0d0d0d / 95%
+
 // Monochrome black (opacity variants)
 $mono-black-100: lab(0% 0 0);
 $mono-black-95: lab(0% 0 0 / 95%);

package/assets/scss/vars/_vars.scss

@@ -5,6 +5,7 @@ $radius: 10px;
 $radius-small: 4px;
 $radius-md: 8px;
 $radius-lg: 10px;
+$radius-12: 12px;
 $radius-xl: 14px;
 $radius-2xl: 16px;
 $radius-full: 9999px;

package/components/auth/login.vue

@@ -94,7 +94,7 @@ function onCreateClick() {
 
 const loading = ref(false);
 
-const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
+const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
 
 async function login() {
   resetSnackbar();
@@ -115,7 +115,7 @@ async function login() {
       loading.value = true;
       await useUser(AuthorizationApiService).login(form.value);
       useAuthPopup().closeAuthPopup();
-      showSuccess('Welcome back!');
+      show('Welcome back!');
     } catch (error) {
       setErrorState(error);
     } finally {

package/components/auth/recovery.vue

@@ -70,7 +70,7 @@ function onLoginClick() {
 
 const loading = ref(false);
 
-const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
+const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
 
 // Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
 onMounted(async () => {
@@ -97,7 +97,7 @@ async function submit() {
     form.value.token = await getRecaptchaToken('password_reset');
     await useUser(AuthorizationApiService).password(form.value);
     useAuthPopup().closeAuthPopup();
-    showSuccess('Check your email');
+    show('Check your email');
   } catch (error) {
     setErrorState(error);
   } finally {

package/components/auth/register.vue

@@ -129,7 +129,7 @@ function onLoginClick() {
 
 const loading = ref(false);
 
-const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
+const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
 // Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
 onMounted(async () => {
   try {
@@ -176,7 +176,7 @@ async function submit() {
     // await PlaylistsApiService.postPlaylist(FAVORITES_KEY, PlaylistType.Private);
 
     useAuthPopup().closeAuthPopup();
-    showSuccess('Registration success');
+    show('Registration success');
   } catch (err) {
     setErrorState(err);
     console.error('Ошибка reCAPTCHA или регистрации:', err);

package/components/card/collections-more.vue

@@ -0,0 +1,133 @@
+<!-- Плитка «показать ещё» в сетке коллекций: 16 размытых обложек сеткой 4×4, поверх счётчик и подпись -->
+<template>
+  <NuxtLink
+    :to="generateLink(to)"
+    class="card-collections-more"
+  >
+    <span
+      v-if="images.length > 0"
+      class="card-collections-more__thumbs"
+      aria-hidden="true"
+    >
+      <UiImg
+        v-for="(src, index) in images"
+        :key="`collections-more-thumb-${index}`"
+        :src="src"
+        :width="ThumbSize.Small.split('x')[0]"
+        :height="ThumbSize.Small.split('x')[1]"
+        alt=""
+        class="card-collections-more__thumb"
+      />
+    </span>
+
+    <span class="card-collections-more__content">
+      <span
+        v-if="count"
+        class="card-collections-more__count"
+      >+{{ count }}</span>
+      <span class="card-collections-more__text">{{ text }}</span>
+    </span>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import { ThumbSize } from '../../runtime';
+import type { IThumbUrls } from '../../types';
+
+const props = defineProps<{
+  to: string
+  text: string
+  /** Обложки для мозаики: лишние отбрасываем, если меньше 16 — повторяем по кругу */
+  thumbs?: IThumbUrls[]
+  /** Сколько коллекций осталось за кадром — «+18» */
+  count?: number
+}>();
+
+const { generateLink } = useGenerateLink();
+
+/** Ячеек в мозаике — сетка 4×4 */
+const CELLS = 16;
+
+const images = computed(() => {
+  const sources = (props.thumbs || [])
+    .map(thumb => thumb?.webp?.[ThumbSize.Small])
+    .filter((src): src is string => Boolean(src));
+
+  if (sources.length === 0) return [];
+
+  /* добиваем по кругу, чтобы мозаика всегда была полной, а не с дырами */
+  return Array.from({ length: CELLS }, (_, index) => sources[index % sources.length]);
+});
+</script>
+
+<style lang="scss">
+.card-collections-more {
+  position: relative;
+  display: grid;
+  place-content: center;
+  min-height: 240px;
+  padding: 12px;
+  overflow: hidden;
+  text-align: center;
+  border-radius: $radius-xl;
+  border: 1px solid $collections-more-border;
+  background-color: $collections-more-bg;
+
+  @include hover(border-color) {
+    border-color: $collections-more-border--hover;
+
+    &::after {
+      background-color: $collections-more-scrim--hover;
+    }
+  }
+
+  /* затемнение поверх обложек — псевдоэлементом, без отдельной ноды-оверлея */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: $collections-more-scrim;
+    transition: var(--transition) background-color;
+  }
+}
+
+.card-collections-more__thumbs {
+  position: absolute;
+  inset: 0;
+  display: grid;
+
+  /* minmax(0, 1fr), иначе auto-минимум трека = min-content картинки и сетка распирает блок */
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+  gap: 2px;
+  filter: blur(12px);
+  transform: scale(1.1);
+}
+
+.card-collections-more__thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-collections-more__content {
+  position: relative;
+  z-index: $z-index-plus;
+  display: grid;
+  row-gap: 2px;
+}
+
+.card-collections-more__count {
+  @include font-2xl;
+
+  font-weight: 700;
+  color: $collections-more-count;
+}
+
+.card-collections-more__text {
+  @include font-sm;
+
+  font-weight: 500;
+  color: $collections-more-text;
+}
+</style>

package/components/card/playlist.vue

@@ -107,7 +107,10 @@
         <p class="card-playlist__user">
           {{ card.username }}
         </p>
-        <div class="card-playlist__content-wrapper">
+        <div
+          v-if="!noActions"
+          class="card-playlist__content-wrapper"
+        >
           <UiDropdown
             ref="dropdownRef"
             right
@@ -177,6 +180,8 @@ import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 const props = defineProps<{
   card: IPlaylistCard
   topPlaylists?: boolean
+  /** Без меню «три точки» — вместе с ним уходят share и report */
+  noActions?: boolean
   priority?: boolean
 }>();
 

package/components/grid/playlists.vue

@@ -6,6 +6,7 @@
       :key="`user-playlist-${index}`"
       :card="item"
       :top-playlists="topPlaylists"
+      :no-actions="noActions"
       :priority="priority && index === 0"
       @share="onShare"
     />
@@ -32,6 +33,8 @@ import type { IPlaylistCard } from '../../types';
 defineProps<{
   items: IPlaylistCard[]
   topPlaylists?: boolean
+  /** Скрыть меню карточки (три точки: share/report) — например у редакционных подборок */
+  noActions?: boolean
   priority?: boolean
 }>();
 

package/components/info/main.vue

@@ -30,19 +30,6 @@
             class="info-main__count"
             icon="video-camera"
           >{{ videosCount || card.videosCount }}</UiCount>
-          <UiBtn
-            v-if="featureFlags.FeatureFollowEnabled"
-            theme="muted"
-            class="info-main__header-button"
-            size="s"
-            @click="onFollowClick"
-          >
-            <UiIcon
-              name="plus"
-              size="16"
-            />
-            {{ t('follow') }}
-          </UiBtn>
           <UiBtn
             theme="muted"
             size="s"
@@ -55,6 +42,14 @@
             />
             {{ t('share') }}
           </UiBtn>
+          <UiFollowBtn
+            v-if="featureFlags.FeatureFollowEnabled"
+            :following="isFollowing"
+            :name="title"
+            class="info-main__header-follow"
+            size="s"
+            @toggle="onFollowClick"
+          />
         </div>
       </div>
 
@@ -190,9 +185,12 @@ function showParameters() {
 
 const authPopupText = 'register_first';
 
+/** Заглушка вместо ручки подписки: состояние живёт только в компоненте, на бэк ничего не уходит */
+const isFollowing = ref(false);
+
 function onFollowClick() {
   if (isAuthorized.value) {
-    console.log('чото делать');
+    isFollowing.value = !isFollowing.value;
   } else {
     openAuthPopup(AuthSteps.Login, authPopupText);
   }
@@ -464,4 +462,10 @@ const socialItems = computed<ILinkItem[]>(() => {
 .info-main__header-button {
   @include button-variant(info-button);
 }
+
+.info-main__header-follow {
+  @include to-br(sm) {
+    margin-inline-start: auto;
+  }
+}
 </style>

package/components/library/feed.vue

@@ -59,6 +59,7 @@
           class="library-feed__tags"
           hydrate-on-visible
           micro
+          hide-more
         />
 
         <p
@@ -86,22 +87,17 @@
         </p>
       </div>
 
-      <div class="library-feed__actions _from-sm">
-        <UiBtn
-          :theme="following ? 'secondary' : 'primary'"
-          class="library-feed__follow"
-          @click="emit('toggle-follow', item)"
-        >
-          <UiIcon
-            :name="following ? 'check' : 'plus'"
-            size="16"
-          />
-          {{ following ? t('library.following_state') : t('follow') }}
-        </UiBtn>
+      <div class="library-feed__actions">
+        <UiFollowBtn
+          :following="following"
+          :name="item.title"
+          @toggle="emit('toggle-follow', item)"
+        />
 
         <UiLink
           :to="item.to"
           theme="secondary"
+          class="_from-sm"
         >
           {{ videosText }}
           <UiIcon
@@ -112,10 +108,10 @@
       </div>
     </header>
 
-    <h3
+    <!-- <h3
       v-if="item.feedTitle"
       class="library-feed__feed-title"
-    >{{ item.feedTitle }}</h3>
+    >{{ item.feedTitle }}</h3> -->
 
     <div class="library-feed__grid">
       <CardVideo
@@ -128,7 +124,7 @@
       />
     </div>
 
-    <UiLink
+    <!-- <UiLink
       :to="item.to"
       theme="secondary"
       class="library-feed__all _to-sm"
@@ -139,7 +135,7 @@
         name="arrow-right"
         size="16"
       />
-    </UiLink>
+    </UiLink> -->
   </article>
 </template>
 
@@ -185,9 +181,6 @@ const ageText = computed(() => {
 
 <style lang="scss">
 .library-feed {
-  /* Растушёвка «ещё» у тегов уходит в фон карточки, а не страницы */
-  --expand-row-fade-end: #{$library-feed-fade};
-
   @include from-br(sm) {
     padding: 20px;
     border: 1px solid $library-feed-border;
@@ -198,23 +191,15 @@ const ageText = computed(() => {
 
 .library-feed__header {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr) auto;
   column-gap: 16px;
   row-gap: 12px;
   align-items: center;
   margin-bottom: 20px;
-
-  @include from-br(sm) {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
 }
 
 .library-feed__header.--without-avatar {
-  grid-template-columns: minmax(0, 1fr);
-
-  @include from-br(sm) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
+  grid-template-columns: minmax(0, 1fr) auto;
 }
 
 .library-feed__avatar {
@@ -344,17 +329,13 @@ const ageText = computed(() => {
   column-gap: 8px;
 }
 
-.library-feed__follow {
-  min-width: 124px;
-}
-
-.library-feed__feed-title {
-  @include font-sm;
+// .library-feed__feed-title {
+//   @include font-sm;
 
-  margin: 0 0 12px;
-  font-weight: 400;
-  color: $library-feed-title;
-}
+//   margin: 0 0 12px;
+//   font-weight: 400;
+//   color: $library-feed-title;
+// }
 
 .library-feed__grid {
   display: grid;

package/components/library/follows.vue

@@ -84,10 +84,21 @@ function isFollowing(item: ILibraryFeedItem) {
   return !unfollowed.value.includes(item.guid);
 }
 
+function follow(guid: string) {
+  unfollowed.value = unfollowed.value.filter(item => item !== guid);
+}
+
+function unfollow(guid: string) {
+  unfollowed.value = [...unfollowed.value, guid];
+}
+
+/** Заглушка: подписка живёт в локальном стейте, API ещё нет. Снекбар с undo рисует сама кнопка. */
 function onToggleFollow(item: ILibraryFeedItem) {
-  unfollowed.value = isFollowing(item)
-    ? [...unfollowed.value, item.guid]
-    : unfollowed.value.filter(guid => guid !== item.guid);
+  if (isFollowing(item)) {
+    unfollow(item.guid);
+  } else {
+    follow(item.guid);
+  }
 }
 </script>
 
@@ -106,6 +117,10 @@ function onToggleFollow(item: ILibraryFeedItem) {
 
 .library-follows__list {
   display: grid;
-  row-gap: 24px;
+  row-gap: 40px;
+
+  @include from-br(sm) {
+    row-gap: 24px;
+  }
 }
 </style>

package/components/playlist/add.vue

@@ -261,7 +261,7 @@ const postVideoForm = computed(() => ({
   duration: videoCard.value?.duration ?? 0,
 }));
 
-const { setErrorState, showSuccess, showError } = useSnackbar();
+const { setErrorState, show, showError } = useSnackbar();
 
 async function onSaveClick() {
   let newPlaylist: IPlaylistShort | undefined;
@@ -293,7 +293,7 @@ async function onSaveClick() {
       newPlaylist,
     });
     closePopup();
-    showSuccess('video_added');
+    show('video_added');
   } catch (error) {
     setErrorState(error);
     console.log(error, 'error add video to playlist');