itube-specs 0.0.747 → 0.0.749

package/components/auth/s-auth-login.vue

@@ -88,7 +88,7 @@ function onCreateClick() {
 
 const loading = ref(false);
 
-const { setErrorState, snackbarText, snackbarTheme, showErrorSnack, resetSnackbar } = useSnackbar();
+const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
 
 async function login() {
   resetSnackbar();
@@ -97,11 +97,11 @@ async function login() {
 
   if (!validateUsername(form.value.username)) {
     error.value.username = true;
-    showErrorSnack('error_username');
+    showError('error_username');
   }
   if (!validatePassword(form.value.password_hash)) {
     error.value.password_hash = true;
-    showErrorSnack('error_password');
+    showError('error_password');
   }
 
   if (!error.value.username && !error.value.password_hash) {
@@ -109,8 +109,7 @@ async function login() {
       loading.value = true;
       await useUser(AuthorizationApiService).login(form.value);
       useAuthPopup().closeAuthPopup();
-      snackbarTheme.value = 'success';
-      snackbarText.value = 'Welcome back!';
+      showSuccess('Welcome back!');
     } catch (error) {
       setErrorState(error);
     } finally {

package/components/auth/s-auth-recovery.vue

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

package/components/auth/s-auth-register.vue

@@ -115,7 +115,7 @@ function onLoginClick() {
 
 const loading = ref(false);
 
-const { setErrorState, snackbarText, snackbarTheme, showErrorSnack, resetSnackbar } = useSnackbar();
+const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
 // Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
 onMounted(async () => {
   try {
@@ -135,9 +135,9 @@ function validateForm(): boolean {
     password_hash: !validatePassword(password_hash),
   };
 
-  if (!validateEmail(email)) showErrorSnack('error_email');
-  if (!validatePassword(password_hash)) showErrorSnack('error_password');
-  if (!validateUsername(username)) showErrorSnack('error_username');
+  if (!validateEmail(email)) showError('error_email');
+  if (!validatePassword(password_hash)) showError('error_password');
+  if (!validateUsername(username)) showError('error_username');
 
   error.value = errors;
 
@@ -162,8 +162,7 @@ async function submit() {
     // await PlaylistsApiService.postPlaylist(FAVORITES_KEY, EPlaylistType.Private);
 
     useAuthPopup().closeAuthPopup();
-    snackbarTheme.value = 'success';
-    snackbarText.value = 'Registration success';
+    showSuccess('Registration success');
   } catch (err) {
     setErrorState(err);
     console.error('Ошибка reCAPTCHA или регистрации:', err);

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

@@ -179,7 +179,7 @@ const loading = ref(false);
 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();
+const { showSuccess, showError, resetSnackbar } = useSnackbar();
 
 function resetForm() {
   Object.keys(form.value).forEach((key) => {
@@ -224,15 +224,15 @@ async function submit() {
 
       if (item === 'from' && !validateEmail(val as string)) {
         error.value[ item ] = true;
-        showErrorSnack('error_email');
+        showError('error_email');
       } else if (item === 'phone' && !validatePhone(val as string)) {
         error.value[ item ] = !validatePhone(val as string);
-        showErrorSnack('error_phone');
+        showError('error_phone');
       } else if (['confirmTrue', 'confirmOwner'].includes(item)) {
         error.value[ item ] = !val;
       } else {
         error.value[ item ] = val === undefined || val === null || String(val).trim() === '';
-        if (error.value[ item ]) showErrorSnack('error_text');
+        if (error.value[ item ]) showError('error_text');
       }
 
       if (error.value[ item ]) valid = false;
@@ -256,12 +256,10 @@ async function submit() {
     })
     closeReportPopup();
     resetForm();
-    snackbarTheme.value = 'success';
-    snackbarText.value = 'email_send';
+    showSuccess('email_send');
   } catch (error) {
     console.log('error send email', error);
-    snackbarText.value = 'email_error';
-    snackbarTheme.value = 'error';
+    showError('email_error');
   } finally {
     loading.value = false
   }

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

@@ -247,7 +247,7 @@ const postVideoForm = computed(() => ({
   duration: videoCard.value?.duration ?? 0,
 }));
 
-const { setErrorState, snackbarText, snackbarTheme } = useSnackbar();
+const { setErrorState, showSuccess, showError } = useSnackbar();
 
 async function onSaveClick() {
   let newPlaylist: IPlaylistShort | undefined;
@@ -262,8 +262,7 @@ async function onSaveClick() {
 
     if (nameExists) {
       nameError.value = true;
-      snackbarTheme.value = 'error';
-      snackbarText.value = 'playlist_name_exists';
+      showError('playlist_name_exists');
       return;
     }
 
@@ -280,8 +279,7 @@ async function onSaveClick() {
       newPlaylist,
     })
     closePopup();
-    snackbarTheme.value = 'success';
-    snackbarText.value = 'video_added';
+    showSuccess('video_added');
   } catch (error) {
     setErrorState(error)
     console.log(error, 'error add video to playlist')

package/components/playlist/s-playlist-delete-video.vue

@@ -44,7 +44,7 @@
 import { EPlaylistStep } from '../../runtime';
 
 const { isPlaylistEditOpen, closePlaylistEdit, currentStep, selectedPlaylist, deletedVideo } = usePlaylistEdit();
-const { snackbarText, snackbarTheme } = useSnackbar();
+const { showSuccess } = useSnackbar();
 
 const props = defineProps<{
   loadingDeleteVideo: boolean
@@ -68,8 +68,7 @@ async function onBinClick() {
       playlistId: playlistId.value,
       deletedVideoId: deletedVideo.value?.id || ''
     })
-    snackbarTheme.value = 'success';
-    snackbarText.value = 'video_removed';
+    showSuccess('video_removed');
     closePlaylistEdit();
   } catch {
     console.log('error delete')

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

@@ -144,7 +144,7 @@ const inputValue = ref('');
 const toggleValue = ref(false);
 
 const { isPlaylistEditOpen, closePlaylistEdit, currentStep, selectedPlaylist, openPlaylistEdit } = usePlaylistEdit();
-const { snackbarText, snackbarTheme } = useSnackbar();
+const { showSuccess } = useSnackbar();
 
 const route = useRoute();
 const id = computed(() => route.params[ 'playlistId' ] ? String(route.params[ 'playlistId' ]) : selectedPlaylist.value?.id);
@@ -165,8 +165,7 @@ const playlistsData = useState<IPlaylistData>(`data-${EAsyncData.PlaylistById}-$
 async function onDeleteClick() {
   try {
     emit('delete-playlist', id.value || '')
-    snackbarTheme.value = 'success';
-    snackbarText.value = 'playlist_deleted';
+    showSuccess('playlist_deleted');
     closePlaylistEdit();
   } catch {
     console.log('error delete')
@@ -188,8 +187,7 @@ async function onSaveClick() {
       playlistsData.value.playlistType = playlistType;
     }
     closePlaylistEdit();
-    snackbarTheme.value= 'success';
-    snackbarText.value = 'changes_soon';
+    showSuccess('changes_soon');
   } catch {
     console.log('error save')
   }

package/components/ui/s-snackbar.vue

@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import { convertString } from '../../runtime';
 
-const { snackbarText, snackbarIcon, snackbarTheme, snackbarTimer, resetSnackbar } = useSnackbar();
+const { snackbarText, snackbarIcon, snackbarTheme, resetSnackbar } = useSnackbar();
 
 const {t, te} = useI18n();
 
@@ -35,16 +35,4 @@ function close() {
 const convertSnackKey = computed(() =>
   convertString().toSnakeCase(snackbarText.value)
 );
-
-let timerId: ReturnType<typeof setTimeout>
-
-onMounted(() => {
-  timerId = setTimeout(() => {
-    close()
-  }, snackbarTimer.value)
-})
-
-onBeforeUnmount(() => {
-  clearTimeout(timerId)
-})
 </script>

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

@@ -15,47 +15,68 @@ describe('useSnackbar', () => {
   });
 
   it('дефолтное состояние', () => {
-    const { snackbarTheme, snackbarText, snackbarIcon, snackbarTimer } = useSnackbar();
+    const { snackbarTheme, snackbarText, snackbarIcon } = useSnackbar();
     expect(snackbarTheme.value).toBe('success');
     expect(snackbarText.value).toBe('');
     expect(snackbarIcon.value).toBe('check');
-    expect(snackbarTimer.value).toBe(2000);
   });
 
-  it('setErrorState устанавливает ошибку', () => {
-    const { setErrorState, snackbarTheme, snackbarIcon, snackbarTimer, snackbarText } = useSnackbar();
-    setErrorState({ message: 'Something failed' });
-    expect(snackbarTheme.value).toBe('error');
-    expect(snackbarIcon.value).toBe('close');
-    expect(snackbarTimer.value).toBe(4000);
-    expect(snackbarText.value).toBe('Something failed');
+  it('showSuccess показывает и авто-сбрасывает через 2000мс', () => {
+    const { showSuccess, snackbarText, snackbarTheme, snackbarIcon } = useSnackbar();
+    showSuccess('Done');
+    expect(snackbarText.value).toBe('Done');
+    expect(snackbarTheme.value).toBe('success');
+    expect(snackbarIcon.value).toBe('check');
+
+    vi.advanceTimersByTime(1999);
+    expect(snackbarText.value).toBe('Done');
+    vi.advanceTimersByTime(1);
+    expect(snackbarText.value).toBe('');
   });
 
-  it('showErrorSnack показывает и авто-сбрасывает', () => {
-    const { showErrorSnack, snackbarText, snackbarTheme } = useSnackbar();
-    showErrorSnack('Error!');
+  it('showError показывает и авто-сбрасывает через 4000мс', () => {
+    const { showError, snackbarText, snackbarTheme, snackbarIcon } = useSnackbar();
+    showError('Error!');
     expect(snackbarText.value).toBe('Error!');
     expect(snackbarTheme.value).toBe('error');
+    expect(snackbarIcon.value).toBe('close');
 
-    vi.advanceTimersByTime(4000);
+    vi.advanceTimersByTime(3999);
+    expect(snackbarText.value).toBe('Error!');
+    vi.advanceTimersByTime(1);
     expect(snackbarText.value).toBe('');
     expect(snackbarTheme.value).toBe('success');
   });
 
-  it('повторный showErrorSnack сбрасывает предыдущий таймер', () => {
-    const { showErrorSnack, snackbarText } = useSnackbar();
-    showErrorSnack('First');
+  it('setErrorState нормализует ошибку и показывает её', () => {
+    const { setErrorState, snackbarTheme, snackbarIcon, snackbarText } = useSnackbar();
+    setErrorState({ message: 'Something failed' });
+    expect(snackbarTheme.value).toBe('error');
+    expect(snackbarIcon.value).toBe('close');
+    expect(snackbarText.value).toBe('Something failed');
+  });
+
+  it('повторный показ сбрасывает предыдущий таймер', () => {
+    const { showError, snackbarText } = useSnackbar();
+    showError('First');
     vi.advanceTimersByTime(2000);
-    showErrorSnack('Second');
+    showError('Second');
     expect(snackbarText.value).toBe('Second');
 
     vi.advanceTimersByTime(4000);
     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('resetSnackbar сбрасывает всё', () => {
-    const { showErrorSnack, resetSnackbar, snackbarText, snackbarTheme, snackbarIcon } = useSnackbar();
-    showErrorSnack('Error');
+    const { showError, resetSnackbar, snackbarText, snackbarTheme, snackbarIcon } = useSnackbar();
+    showError('Error');
     resetSnackbar();
     expect(snackbarText.value).toBe('');
     expect(snackbarTheme.value).toBe('success');

package/composables/use-fetch-related-videos.ts

@@ -10,7 +10,7 @@ export const useFetchRelatedVideos = async (
     const lang = useLang() as ELanguage;
     const route = useRoute();
     const mobile = !!useState<boolean>('isMobile').value;
-    const perPage = mobile ? 7 : 14;
+    const perPage = mobile ? 6 : 14;
     const slug = useSlug();
     const key = EAsyncData.RelatedVideos;
     const stateKey = computed(() => `data-${key}-${slug.value}-${JSON.stringify(route.query)}-${lang}`);

package/composables/use-snackbar.ts

@@ -3,46 +3,57 @@ import { parseApiError } from '../runtime';
 const SUCCESS_TIME = 2000;
 const ERROR_TIME = 4000;
 
-let _timeoutClosure: null | ReturnType<typeof setTimeout> = null;
+// Один таймер на логическое уведомление. Снекбар физически переезжает между
+// диалогом (s-popup) и общим макетом (default.vue), поэтому таймер не может жить
+// в компоненте — при перемонтировании он сбрасывался бы заново. Идентификатор
+// setTimeout создаётся только в браузере, на сервере он не заводится.
+let dismissTimer: null | ReturnType<typeof setTimeout> = null;
 
-/** Управляет состоянием snackbar-уведомления: показ ошибки, сброс, тема, иконка и таймер. */
+/** Управляет состоянием snackbar-уведомления: показ успеха и ошибки, сброс, тема, иконка и таймер автозакрытия. */
 export const useSnackbar = () => {
   const snackbarIcon = useState('snackbar-icon', () => 'check');
   const snackbarText = useState('snackbar-text', () => '');
   const snackbarButtonText = useState('snackbar-button-text', () => '');
   const isSnackBarInPopup = useState('snackbar-in-popup', () => false);
   const snackbarTheme = useState<'success' | 'error' | 'default'>('snackbar-theme', () => 'success');
-  const snackbarTimer = useState('snackbar-timer', () => SUCCESS_TIME);
 
-  const setErrorState = (error: any) => {
-    snackbarText.value = parseApiError(error);
-    snackbarTheme.value = 'error';
-    snackbarIcon.value = 'close';
-    snackbarTimer.value = ERROR_TIME;
-  };
+  function clearTimer() {
+    if (dismissTimer) {
+      clearTimeout(dismissTimer);
+      dismissTimer = null;
+    }
+  }
 
-  function showErrorSnack(message: string) {
-    if (_timeoutClosure) {
-      clearTimeout(_timeoutClosure);
+  function scheduleDismiss(ms: number) {
+    clearTimer();
+    if (import.meta.client) {
+      dismissTimer = setTimeout(resetSnackbar, ms);
     }
+  }
 
+  function showSuccess(message: string) {
+    snackbarTheme.value = 'success';
+    snackbarIcon.value = 'check';
+    snackbarText.value = message;
+    scheduleDismiss(SUCCESS_TIME);
+  }
+
+  function showError(message: string) {
     snackbarTheme.value = 'error';
     snackbarIcon.value = 'close';
     snackbarText.value = message;
-    snackbarTimer.value = ERROR_TIME;
+    scheduleDismiss(ERROR_TIME);
+  }
 
-    _timeoutClosure = setTimeout(resetSnackbar, snackbarTimer.value);
+  function setErrorState(error: any) {
+    showError(parseApiError(error));
   }
 
   function resetSnackbar() {
-    if (_timeoutClosure) {
-      clearTimeout(_timeoutClosure);
-      _timeoutClosure = null;
-    }
+    clearTimer();
     snackbarIcon.value = 'check';
     snackbarText.value = '';
     snackbarTheme.value = 'success';
-    snackbarTimer.value = SUCCESS_TIME;
   }
 
   return {
@@ -50,10 +61,11 @@ export const useSnackbar = () => {
     snackbarText,
     snackbarButtonText,
     snackbarTheme,
-    snackbarTimer,
-    setErrorState,
-    showErrorSnack,
     isSnackBarInPopup,
+    showSuccess,
+    showError,
+    setErrorState,
     resetSnackbar,
+    showErrorSnack: showError,
   };
 };

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 { snackbarText, snackbarTheme, showErrorSnack } = useSnackbar();
+  const { showSuccess, showError } = useSnackbar();
   const register = async (form: IRegistrateForm) => {
     const response = await apiService.register(form);
     if (response) {
@@ -72,10 +72,9 @@ export const useUser = (apiService) => {
   const changePassword = async (form: IChangePasswordForm) => {
     try {
       await apiService.changePassword(form);
-      snackbarTheme.value = 'success';
-      snackbarText.value = 'Password changed';
+      showSuccess('Password changed');
     } catch (err) {
-      showErrorSnack('Error while changing password');
+      showError('Error while changing password');
       console.log(err, 'error change password');
     }
   };
@@ -83,10 +82,9 @@ export const useUser = (apiService) => {
   const changeEmail = async (form: IChangeEmail) => {
     try {
       await apiService.changeEmail(form);
-      snackbarTheme.value = 'success';
-      snackbarText.value = 'email_changed';
+      showSuccess('email_changed');
     } catch (err) {
-      showErrorSnack('Error while changing email');
+      showError('Error while changing email');
       console.log(err, 'error change email');
     }
   };
@@ -95,11 +93,10 @@ export const useUser = (apiService) => {
     try {
       const {generateLink} = useGenerateLink();
       await apiService.recoveryPassword(form);
-      snackbarTheme.value = 'success';
-      snackbarText.value = 'Password recovered';
+      showSuccess('Password recovered');
       await useRouter().push(generateLink('/profile'));
     } catch (err) {
-      showErrorSnack('Error while recovery password');
+      showError('Error while recovery password');
       console.log(err, 'error change password');
     }
   };

package/package.json

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