itube-specs 0.0.902 → 0.0.910

package/composables/__tests__/use-snackbar.test.ts

@@ -15,43 +15,40 @@ describe('useSnackbar', () => {
   });
 
   it('дефолтное состояние', () => {
-    const { snackbarTheme, snackbarText, snackbarIcon } = useSnackbar();
-    expect(snackbarTheme.value).toBe('success');
+    const { snackbarText, snackbarIcon, snackbarHighlight, snackbarActionText } = useSnackbar();
     expect(snackbarText.value).toBe('');
     expect(snackbarIcon.value).toBe('check');
+    expect(snackbarHighlight.value).toBe('');
+    expect(snackbarActionText.value).toBe('');
   });
 
-  it('showSuccess показывает и авто-сбрасывает через 2000мс', () => {
-    const { showSuccess, snackbarText, snackbarTheme, snackbarIcon } = useSnackbar();
-    showSuccess('Done');
+  it('show показывает и авто-сбрасывает через 4000мс', () => {
+    const { show, snackbarText, snackbarIcon } = useSnackbar();
+    show('Done');
     expect(snackbarText.value).toBe('Done');
-    expect(snackbarTheme.value).toBe('success');
     expect(snackbarIcon.value).toBe('check');
 
-    vi.advanceTimersByTime(1999);
+    vi.advanceTimersByTime(3999);
     expect(snackbarText.value).toBe('Done');
     vi.advanceTimersByTime(1);
     expect(snackbarText.value).toBe('');
   });
 
   it('showError показывает и авто-сбрасывает через 4000мс', () => {
-    const { showError, snackbarText, snackbarTheme, snackbarIcon } = useSnackbar();
+    const { showError, snackbarText, snackbarIcon } = useSnackbar();
     showError('Error!');
     expect(snackbarText.value).toBe('Error!');
-    expect(snackbarTheme.value).toBe('error');
     expect(snackbarIcon.value).toBe('close');
 
     vi.advanceTimersByTime(3999);
     expect(snackbarText.value).toBe('Error!');
     vi.advanceTimersByTime(1);
     expect(snackbarText.value).toBe('');
-    expect(snackbarTheme.value).toBe('success');
   });
 
   it('setErrorState нормализует ошибку и показывает её', () => {
-    const { setErrorState, snackbarTheme, snackbarIcon, snackbarText } = useSnackbar();
+    const { setErrorState, snackbarIcon, snackbarText } = useSnackbar();
     setErrorState({ message: 'Something failed' });
-    expect(snackbarTheme.value).toBe('error');
     expect(snackbarIcon.value).toBe('close');
     expect(snackbarText.value).toBe('Something failed');
   });
@@ -67,19 +64,128 @@ describe('useSnackbar', () => {
     expect(snackbarText.value).toBe('');
   });
 
-  it('showErrorSnack остаётся алиасом showError', () => {
-    const { showErrorSnack, snackbarText, snackbarTheme } = useSnackbar();
-    showErrorSnack('Legacy');
-    expect(snackbarText.value).toBe('Legacy');
-    expect(snackbarTheme.value).toBe('error');
+  it('опции задают иконку и подсветку', () => {
+    const { show, snackbarIcon, snackbarHighlight } = useSnackbar();
+    show('Unfollowed', { icon: 'minus', highlight: 'Top To Bottom' });
+    expect(snackbarIcon.value).toBe('minus');
+    expect(snackbarHighlight.value).toBe('Top To Bottom');
+  });
+
+  it('onAction включает кнопку с ключом undo по умолчанию и держит снекбар 6000мс', () => {
+    const { show, snackbarActionText, snackbarText } = useSnackbar();
+    show('Unfollowed', { onAction: () => {} });
+    expect(snackbarActionText.value).toBe('undo');
+
+    vi.advanceTimersByTime(5999);
+    expect(snackbarText.value).toBe('Unfollowed');
+    vi.advanceTimersByTime(1);
+    expect(snackbarText.value).toBe('');
+    expect(snackbarActionText.value).toBe('');
+  });
+
+  it('actionText переопределяет ключ подписи кнопки', () => {
+    const { show, snackbarActionText } = useSnackbar();
+    show('Video removed', { onAction: () => {}, actionText: 'restore' });
+    expect(snackbarActionText.value).toBe('restore');
+  });
+
+  it('без onAction кнопки нет', () => {
+    const { show, snackbarActionText } = useSnackbar();
+    show('Done');
+    expect(snackbarActionText.value).toBe('');
+  });
+
+  it('runSnackbarAction вызывает колбэк и закрывает снекбар', () => {
+    const { show, runSnackbarAction, snackbarText, snackbarActionText } = useSnackbar();
+    const undo = vi.fn();
+    show('Unfollowed', { onAction: undo });
+
+    runSnackbarAction();
+    expect(undo).toHaveBeenCalledTimes(1);
+    expect(snackbarText.value).toBe('');
+    expect(snackbarActionText.value).toBe('');
+
+    runSnackbarAction();
+    expect(undo).toHaveBeenCalledTimes(1);
+  });
+
+  it('новый показ без onAction сбрасывает предыдущий колбэк', () => {
+    const { show, runSnackbarAction } = useSnackbar();
+    const undo = vi.fn();
+    show('Unfollowed', { onAction: undo });
+    show('Done');
+
+    runSnackbarAction();
+    expect(undo).not.toHaveBeenCalled();
+  });
+
+  it('pauseDismiss останавливает автозакрытие', () => {
+    const { show, pauseDismiss, snackbarText } = useSnackbar();
+    show('Done');
+
+    vi.advanceTimersByTime(1000);
+    pauseDismiss();
+
+    vi.advanceTimersByTime(60_000);
+    expect(snackbarText.value).toBe('Done');
+  });
+
+  it('resumeDismiss добирает остаток, а не начинает заново', () => {
+    const { show, pauseDismiss, resumeDismiss, snackbarText } = useSnackbar();
+    show('Done');
+
+    vi.advanceTimersByTime(3000);
+    pauseDismiss();
+    vi.advanceTimersByTime(10_000);
+    resumeDismiss();
+
+    vi.advanceTimersByTime(999);
+    expect(snackbarText.value).toBe('Done');
+    vi.advanceTimersByTime(1);
+    expect(snackbarText.value).toBe('');
+  });
+
+  it('повторная пауза не съедает остаток дважды', () => {
+    const { show, pauseDismiss, resumeDismiss, snackbarText } = useSnackbar();
+    show('Done');
+
+    vi.advanceTimersByTime(1000);
+    pauseDismiss();
+    vi.advanceTimersByTime(5000);
+    pauseDismiss();
+    resumeDismiss();
+
+    vi.advanceTimersByTime(2999);
+    expect(snackbarText.value).toBe('Done');
+    vi.advanceTimersByTime(1);
+    expect(snackbarText.value).toBe('');
+  });
+
+  it('resumeDismiss без показанного снекбара ничего не запускает', () => {
+    const { resumeDismiss, snackbarText } = useSnackbar();
+    resumeDismiss();
+
+    vi.advanceTimersByTime(10_000);
+    expect(snackbarText.value).toBe('');
+  });
+
+  it('новый show перебивает паузу предыдущего снекбара', () => {
+    const { show, pauseDismiss, snackbarText } = useSnackbar();
+    show('First');
+    pauseDismiss();
+    show('Second');
+
+    vi.advanceTimersByTime(4000);
+    expect(snackbarText.value).toBe('');
   });
 
   it('resetSnackbar сбрасывает всё', () => {
-    const { showError, resetSnackbar, snackbarText, snackbarTheme, snackbarIcon } = useSnackbar();
-    showError('Error');
+    const { show, resetSnackbar, snackbarText, snackbarIcon, snackbarHighlight, snackbarActionText } = useSnackbar();
+    show('Unfollowed', { icon: 'minus', highlight: 'Top To Bottom', onAction: () => {} });
     resetSnackbar();
     expect(snackbarText.value).toBe('');
-    expect(snackbarTheme.value).toBe('success');
     expect(snackbarIcon.value).toBe('check');
+    expect(snackbarHighlight.value).toBe('');
+    expect(snackbarActionText.value).toBe('');
   });
 });

package/composables/use-snackbar.ts

@@ -1,21 +1,42 @@
 import { parseApiError } from '../runtime';
 
-const SUCCESS_TIME = 2000;
-const ERROR_TIME = 4000;
+const DISMISS_TIME = 4000;
+const ACTION_DISMISS_TIME = 6000;
 
 // Один таймер на логическое уведомление. Снекбар физически переезжает между
-// диалогом (s-popup) и общим макетом (default.vue), поэтому таймер не может жить
+// диалогом (ui-popup) и общим макетом (default.vue), поэтому таймер не может жить
 // в компоненте — при перемонтировании он сбрасывался бы заново. Идентификатор
 // setTimeout создаётся только в браузере, на сервере он не заводится.
 let dismissTimer: null | ReturnType<typeof setTimeout> = null;
 
-/** Управляет состоянием snackbar-уведомления: показ успеха и ошибки, сброс, тема, иконка и таймер автозакрытия. */
+// Остаток автозакрытия и момент его запуска — чтобы навести на снекбар, прочитать
+// сообщение и дожать undo: на ховере/фокусе таймер встаёт на паузу, после уходя
+// курсора он добирает недоигранное время, а не начинает отсчёт заново.
+let dismissRemaining = 0;
+let dismissStartedAt = 0;
+
+// Колбэк кнопки лежит рядом с таймером, а не в useState: функция не сериализуется
+// в payload, да и показывается снекбар всегда с клиента.
+let actionHandler: null | (() => unknown) = null;
+
+export interface ISnackbarOptions {
+  /** Имя иконки в кружке слева. */
+  icon?: string;
+  /** Часть сообщения, выводимая жирным — имя канала, плейлиста, видео. */
+  highlight?: string;
+  /** i18n-ключ внутри `snackbar.*` для подписи кнопки, по умолчанию `undo`. */
+  actionText?: string;
+  /** Действие кнопки — как правило откат того, о чём сообщает снекбар. */
+  onAction?: () => unknown;
+}
+
+/** Управляет состоянием snackbar-уведомления: показ сообщения, кнопка отмены действия, сброс, иконка и таймер автозакрытия. */
 export const useSnackbar = () => {
   const snackbarIcon = useState('snackbar-icon', () => 'check');
   const snackbarText = useState('snackbar-text', () => '');
-  const snackbarButtonText = useState('snackbar-button-text', () => '');
+  const snackbarHighlight = useState('snackbar-highlight', () => '');
+  const snackbarActionText = useState('snackbar-action-text', () => '');
   const isSnackBarInPopup = useState('snackbar-in-popup', () => false);
-  const snackbarTheme = useState<'success' | 'error' | 'default'>('snackbar-theme', () => 'success');
 
   function clearTimer() {
     if (dismissTimer) {
@@ -26,46 +47,80 @@ export const useSnackbar = () => {
 
   function scheduleDismiss(ms: number) {
     clearTimer();
+    dismissRemaining = ms;
     if (import.meta.client) {
+      dismissStartedAt = Date.now();
       dismissTimer = setTimeout(resetSnackbar, ms);
     }
   }
 
-  function showSuccess(message: string) {
-    snackbarTheme.value = 'success';
-    snackbarIcon.value = 'check';
-    snackbarText.value = message;
-    scheduleDismiss(SUCCESS_TIME);
+  /** Пауза автозакрытия, пока на снекбаре курсор или фокус. */
+  function pauseDismiss() {
+    if (!dismissTimer) return;
+
+    dismissRemaining -= Date.now() - dismissStartedAt;
+    clearTimer();
+  }
+
+  /** Возврат к отсчёту с того места, где он остановился. */
+  function resumeDismiss() {
+    if (dismissTimer || !snackbarText.value) return;
+
+    if (dismissRemaining <= 0) {
+      resetSnackbar();
+      return;
+    }
+
+    scheduleDismiss(dismissRemaining);
   }
 
-  function showError(message: string) {
-    snackbarTheme.value = 'error';
-    snackbarIcon.value = 'close';
+  function show(message: string, options: ISnackbarOptions = {}) {
+    actionHandler = options.onAction ?? null;
+    snackbarIcon.value = options.icon ?? 'check';
     snackbarText.value = message;
-    scheduleDismiss(ERROR_TIME);
+    snackbarHighlight.value = options.highlight ?? '';
+    snackbarActionText.value = actionHandler ? options.actionText ?? 'undo' : '';
+    scheduleDismiss(actionHandler ? ACTION_DISMISS_TIME : DISMISS_TIME);
+  }
+
+  /** Ошибка отличается от обычного сообщения только иконкой — вид у снекбара один. */
+  function showError(message: string, options: ISnackbarOptions = {}) {
+    show(message, { icon: 'close', ...options });
   }
 
   function setErrorState(error: any) {
     showError(parseApiError(error));
   }
 
+  /** Запускает действие кнопки и закрывает снекбар, чтобы отменить нельзя было дважды. */
+  function runSnackbarAction() {
+    const handler = actionHandler;
+    resetSnackbar();
+    handler?.();
+  }
+
   function resetSnackbar() {
     clearTimer();
+    dismissRemaining = 0;
+    actionHandler = null;
     snackbarIcon.value = 'check';
     snackbarText.value = '';
-    snackbarTheme.value = 'success';
+    snackbarHighlight.value = '';
+    snackbarActionText.value = '';
   }
 
   return {
     snackbarIcon,
     snackbarText,
-    snackbarButtonText,
-    snackbarTheme,
+    snackbarHighlight,
+    snackbarActionText,
     isSnackBarInPopup,
-    showSuccess,
+    show,
     showError,
     setErrorState,
+    runSnackbarAction,
     resetSnackbar,
-    showErrorSnack: showError,
+    pauseDismiss,
+    resumeDismiss,
   };
 };

package/composables/use-user.ts

@@ -23,7 +23,7 @@ function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Omit<T, K
  * @param apiService - сервис для API-запросов
  */
 export const useUser = (apiService) => {
-  const { showSuccess, showError } = useSnackbar();
+  const { show, showError } = useSnackbar();
   const register = async (form: IRegistrateForm) => {
     const response = await apiService.register(form);
     if (response) {
@@ -72,7 +72,7 @@ export const useUser = (apiService) => {
   const changePassword = async (form: IChangePasswordForm) => {
     try {
       await apiService.changePassword(form);
-      showSuccess('Password changed');
+      show('Password changed');
     } catch (err) {
       showError('Error while changing password');
       console.log(err, 'error change password');
@@ -82,7 +82,7 @@ export const useUser = (apiService) => {
   const changeEmail = async (form: IChangeEmail) => {
     try {
       await apiService.changeEmail(form);
-      showSuccess('email_changed');
+      show('email_changed');
     } catch (err) {
       showError('Error while changing email');
       console.log(err, 'error change email');
@@ -93,7 +93,7 @@ export const useUser = (apiService) => {
     try {
       const { generateLink } = useGenerateLink();
       await apiService.recoveryPassword(form);
-      showSuccess('Password recovered');
+      show('Password recovered');
       await useRouter().push(generateLink('/profile'));
     } catch (err) {
       showError('Error while recovery password');

package/package.json

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

package/pages/contacts.vue

@@ -175,7 +175,7 @@ const requiredFields = computed(() => getSubjectItems.value?.filter(item => item
 
 const loading = ref(false);
 
-const { showSuccess, showError } = useSnackbar();
+const { show, showError } = useSnackbar();
 
 // Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
 onMounted(async () => {
@@ -247,7 +247,7 @@ async function submit() {
     }
 
     await ContactsApiService.email(form.value);
-    showSuccess('email_send');
+    show('email_send');
     resetForm();
   } catch (error) {
     console.log('error send email', error);

package/pages/library/index.vue

@@ -323,7 +323,7 @@ const breadcrumbs = [
   margin: 0;
   padding: 0;
   list-style: none;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
 
   @include from-br(sm) {
     gap: 24px;

package/pages/playlists/index.vue

@@ -8,6 +8,31 @@
       class="_breadcrumbs"
     />
 
+    <header class="playlists__header">
+      <UiSectionTitle
+        v-if="h1"
+        :title="h1"
+        :count="publicData.items.length"
+        icon="list"
+      />
+
+      <UiLink
+        :to="generateLink('/library')"
+        theme="secondary"
+        class="playlists__my-link"
+      >
+        <UiIcon
+          name="playlist"
+          size="16"
+        />
+        {{ $t('my_playlists_count', { count: myPlaylistsCount }) }}
+        <UiIcon
+          name="arrow-right"
+          size="16"
+        />
+      </UiLink>
+    </header>
+
     <ClientOnly>
       <template v-if="isAuthorized && filteredUserItems && filteredUserItems.length > 0">
         <UiSectionTitle
@@ -15,6 +40,7 @@
           :count="filteredUserItems.length"
           class="playlists__title"
           title-tag="h2"
+          size="xl"
           icon="clapperboard-play"
         />
 
@@ -27,12 +53,13 @@
       </template>
     </ClientOnly>
 
+    <SectionCollections :data-items="publicData.items"/>
+
     <UiSectionTitle
-      v-if="h1"
-      :title="h1"
-      :count="publicData.items.length"
+      :title="$t('user_playlists')"
       class="playlists__title"
-      icon="list"
+      title-tag="h2"
+      size="xl"
     />
 
     <SectionNavLinks
@@ -119,6 +146,11 @@ watch(
 
 const { t } = useI18n();
 
+const { generateLink } = useGenerateLink();
+
+/** До загрузки своих плейлистов (и у гостя) в скобках 0 */
+const myPlaylistsCount = computed(() => filteredUserItems.value?.length ?? 0);
+
 const pagePureName = useGetPureRouteName();
 const { meta, h1 } = useMeta({
   t,
@@ -143,6 +175,25 @@ const breadcrumbs = [
 </script>
 
 <style lang="scss">
+.playlists__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  row-gap: 12px;
+  margin-bottom: 24px;
+
+  @include from-br(xm) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 16px;
+  }
+}
+
+.playlists__my-link {
+  flex-shrink: 0;
+}
+
 .playlists__title {
   margin-bottom: 24px;
 }

package/assets/icons/common/crest-in-circle.svg

@@ -1 +0,0 @@
-<svg fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v8m-4-4h8"/></svg>