itube-specs 0.0.911 → 0.0.913

package/components/ui/tooltip.vue

@@ -17,7 +17,7 @@
     <transition name="fade">
       <div
         v-if="isOpen"
-        :class="{'--right': right}"
+        :style="contentStyle"
         class="ui-tooltip__content"
       >
         <slot/>
@@ -31,12 +31,15 @@ import { checkDeviceWidth } from '../../runtime';
 import { onClickOutside } from '@vueuse/core';
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
-defineProps<{
+const props = defineProps<{
   right?: boolean
 }>();
 
+const OFFSET = 8;
+
 const tooltipRef = ref<HTMLElement>();
 const isOpen = ref(false);
+const contentStyle = ref<Record<string, string>>({});
 
 const breakpoints = CSS_BREAKPOINTS;
 const { isMobile } = checkDeviceWidth(breakpoints);
@@ -47,9 +50,26 @@ onClickOutside(tooltipRef, () => {
   }
 });
 
+/** Контент в position: fixed — иначе его режет overflow скроллящихся родителей (список в попапе). */
+function open() {
+  const rect = tooltipRef.value?.getBoundingClientRect();
+  if (!rect) return;
+
+  // На мобиле привязка к триггеру уводит широкий тултип за правый край — прибиваем к вьюпорту.
+  if (isMobile.value) {
+    contentStyle.value = { top: `${rect.top - OFFSET}px`, left: `${OFFSET}px` };
+  } else {
+    contentStyle.value = props.right
+      ? { top: `${rect.top - OFFSET}px`, left: `${rect.left}px` }
+      : { top: `${rect.top - OFFSET}px`, right: `${window.innerWidth - rect.right}px` };
+  }
+
+  isOpen.value = true;
+}
+
 function onEnter() {
   if (!isMobile.value) {
-    isOpen.value = true;
+    open();
   }
 }
 
@@ -60,13 +80,20 @@ function onLeave() {
 }
 
 function onClick() {
-  if (isMobile.value) {
-    isOpen.value = !isOpen.value;
+  if (!isMobile.value) return;
+
+  if (isOpen.value) {
+    isOpen.value = false;
+  } else {
+    open();
   }
 }
 </script>
 
 <style lang="scss">
+/* Держим в паре с OFFSET в скрипте: отступ тултипа от края вьюпорта. */
+$tooltip-viewport-gap: 8px;
+
 .ui-tooltip {
   position: relative;
   display: inline-flex;
@@ -80,26 +107,20 @@ function onClick() {
 }
 
 .ui-tooltip__content {
-  position: absolute;
-  bottom: 100%;
-  right: 0;
+  position: fixed;
+  transform: translateY(-100%);
   z-index: $z-index-tooltip;
   display: grid;
-  margin-bottom: 8px;
   padding: 12px;
   background-color: $tooltip-bg;
   border-radius: $radius-lg;
   color: $tooltip-text;
   width: max-content;
+  max-width: calc(100vw - #{$tooltip-viewport-gap * 2});
   pointer-events: none;
   box-shadow: $tooltip-shadow;
 }
 
-.ui-tooltip__content.--right {
-  right: auto;
-  left: 0;
-}
-
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 100ms ease;

package/composables/__tests__/use-overlay-stack.test.ts

@@ -0,0 +1,110 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { useOverlayStack } from '../use-overlay-stack';
+
+const NO_ENTER = '--no-enter-anim';
+const NO_LEAVE = '--no-leave-anim';
+
+let frames: Array<() => void> = [];
+
+function flushFrames() {
+  const queued = frames;
+  frames = [];
+  queued.forEach((cb) => cb());
+}
+
+function createOverlay() {
+  const el = document.createElement('dialog');
+  document.body.appendChild(el);
+
+  return el;
+}
+
+describe('useOverlayStack', () => {
+  beforeEach(() => {
+    frames = [];
+    vi.stubGlobal('requestAnimationFrame', (cb: () => void) => {
+      frames.push(cb);
+
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    flushFrames();
+    document.body.innerHTML = '';
+    vi.unstubAllGlobals();
+  });
+
+  it('первый оверлей анимируется в обе стороны', () => {
+    const { registerOverlay } = useOverlayStack();
+    const el = createOverlay();
+
+    registerOverlay(el);
+
+    expect(el.classList.contains(NO_ENTER)).toBe(false);
+    expect(el.classList.contains(NO_LEAVE)).toBe(false);
+  });
+
+  it('второй оверлей открывается без анимации появления', () => {
+    const { registerOverlay } = useOverlayStack();
+    const first = createOverlay();
+    const second = createOverlay();
+
+    registerOverlay(first);
+    registerOverlay(second);
+
+    expect(second.classList.contains(NO_ENTER)).toBe(true);
+  });
+
+  it('пока оверлеев больше одного, закрытие не анимируется ни у одного', () => {
+    const { registerOverlay } = useOverlayStack();
+    const first = createOverlay();
+    const second = createOverlay();
+
+    registerOverlay(first);
+    registerOverlay(second);
+
+    expect(first.classList.contains(NO_LEAVE)).toBe(true);
+    expect(second.classList.contains(NO_LEAVE)).toBe(true);
+  });
+
+  it('уходящий оверлей остаётся в стеке до конца кадра — сменщик успевает открыться без анимации', () => {
+    const { registerOverlay, releaseOverlay } = useOverlayStack();
+    const closing = createOverlay();
+    const opening = createOverlay();
+
+    registerOverlay(closing);
+    releaseOverlay(closing);
+    registerOverlay(opening);
+
+    expect(opening.classList.contains(NO_ENTER)).toBe(true);
+    expect(closing.classList.contains(NO_LEAVE)).toBe(true);
+  });
+
+  it('оставшийся последним снова закрывается с анимацией', () => {
+    const { registerOverlay, releaseOverlay } = useOverlayStack();
+    const closing = createOverlay();
+    const opening = createOverlay();
+
+    registerOverlay(closing);
+    releaseOverlay(closing);
+    registerOverlay(opening);
+    flushFrames();
+
+    expect(opening.classList.contains(NO_LEAVE)).toBe(false);
+  });
+
+  it('оверлей, удалённый из DOM без релиза, не блокирует анимации следующему', () => {
+    const { registerOverlay } = useOverlayStack();
+    const leaked = createOverlay();
+    const next = createOverlay();
+
+    registerOverlay(leaked);
+    leaked.remove();
+    registerOverlay(next);
+
+    expect(next.classList.contains(NO_ENTER)).toBe(false);
+    expect(next.classList.contains(NO_LEAVE)).toBe(false);
+  });
+});

package/composables/__tests__/use-video-collections.test.ts

@@ -0,0 +1,75 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { useVideoCollections } from '../use-video-collections';
+import { useSnackbar } from '../use-snackbar';
+
+describe('useVideoCollections', () => {
+  beforeEach(() => {
+    useNuxtApp().payload.state = {};
+    vi.useFakeTimers();
+    useSnackbar().resetSnackbar();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('добавляет в «смотреть позже» и показывает снекбар с кнопкой отмены', () => {
+    const { watchLater, isWatchLater, toggleWatchLater } = useVideoCollections();
+    const { snackbarText, snackbarIcon, snackbarHighlight, snackbarActionText } = useSnackbar();
+
+    toggleWatchLater('guid-1', 'Video title');
+
+    expect(watchLater.value).toEqual([ 'guid-1' ]);
+    expect(isWatchLater('guid-1')).toBe(true);
+    expect(snackbarText.value).toBe('added');
+    expect(snackbarIcon.value).toBe('clock');
+    expect(snackbarHighlight.value).toBe('Video title');
+    expect(snackbarActionText.value).toBe('undo');
+  });
+
+  it('удаление показывает снекбар «removed»', () => {
+    const { watchLater, toggleWatchLater } = useVideoCollections();
+    const { snackbarText } = useSnackbar();
+
+    toggleWatchLater('guid-1', 'Video title');
+    toggleWatchLater('guid-1', 'Video title');
+
+    expect(watchLater.value).toEqual([]);
+    expect(snackbarText.value).toBe('removed');
+  });
+
+  it('избранное показывает снекбар с иконкой сердца', () => {
+    const { favorites, isFavorite, toggleFavorite } = useVideoCollections();
+    const { snackbarIcon, snackbarText } = useSnackbar();
+
+    toggleFavorite('guid-2', 'Another title');
+
+    expect(favorites.value).toEqual([ 'guid-2' ]);
+    expect(isFavorite('guid-2')).toBe(true);
+    expect(snackbarIcon.value).toBe('heart');
+    expect(snackbarText.value).toBe('added');
+  });
+
+  it('отмена возвращает список и не показывает новый снекбар', () => {
+    const { favorites, toggleFavorite } = useVideoCollections();
+    const { runSnackbarAction, snackbarText } = useSnackbar();
+
+    toggleFavorite('guid-2', 'Another title');
+    runSnackbarAction();
+
+    expect(favorites.value).toEqual([]);
+    expect(snackbarText.value).toBe('');
+  });
+
+  it('отмена удаления возвращает ролик обратно', () => {
+    const { watchLater, toggleWatchLater } = useVideoCollections();
+    const { runSnackbarAction } = useSnackbar();
+
+    toggleWatchLater('guid-3', 'Third title');
+    toggleWatchLater('guid-3', 'Third title');
+    runSnackbarAction();
+
+    expect(watchLater.value).toEqual([ 'guid-3' ]);
+  });
+});

package/composables/use-overlay-stack.ts

@@ -0,0 +1,58 @@
+const NO_ENTER_ANIM_CLASS = '--no-enter-anim';
+const NO_LEAVE_ANIM_CLASS = '--no-leave-anim';
+
+// Элементы, а не счётчик: класс вешается прямо на DOM. Уходящий компонент управлять
+// своим `:class` уже не может — Vue гасит его реактивный эффект в unmount, до конца
+// leave-транзишена, поэтому ре-рендер по реактивному флагу не случится.
+const overlays = new Set<HTMLElement>();
+
+function syncLeaveAnimation() {
+  const chained = overlays.size > 1;
+  overlays.forEach((el) => el.classList.toggle(NO_LEAVE_ANIM_CLASS, chained));
+}
+
+/**
+ * Стек открытых оверлеев (попапы и мобильные шиты дропдауна). Нужен, чтобы анимация
+ * появления играла только у первого оверлея, а анимация закрытия — только у последнего:
+ * при переходе попап→попап уходящий и приходящий диалоги ехали бы навстречу друг другу
+ * и картинка скакала бы.
+ */
+export const useOverlayStack = () => {
+  /**
+   * Решение по анимации появления принимается один раз и дальше не меняется: состав
+   * стека успеет измениться до того, как браузер прочитает transition уходящего.
+   */
+  function registerOverlay(el?: HTMLElement | null) {
+    if (!import.meta.client || !el) return;
+
+    overlays.forEach((item) => {
+      if (!item.isConnected) overlays.delete(item);
+    });
+
+    el.classList.toggle(NO_ENTER_ANIM_CLASS, overlays.size > 0);
+    overlays.add(el);
+    syncLeaveAnimation();
+  }
+
+  /**
+   * Выпуск отложен на кадр: следующий оверлей монтируется позже unmount-хука уходящего
+   * (а ленивый — ещё и через микротаск). Убрать элемент из стека сразу — уходящий не
+   * успеет узнать, что ему на смену открывают другой попап, и проиграет закрытие.
+   */
+  function releaseOverlay(el?: HTMLElement | null) {
+    if (!import.meta.client || !el) return;
+
+    const release = () => {
+      overlays.delete(el);
+      syncLeaveAnimation();
+    };
+
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(release);
+    } else {
+      release();
+    }
+  }
+
+  return { registerOverlay, releaseOverlay };
+};

package/composables/use-playlist-edit.ts

@@ -8,6 +8,8 @@ export const usePlaylistEdit = () => {
   const isPlaylistEditOpen = useState('playlist-edit-open', () => false);
   const isBackToEdit = useState('playlist-edit-back', () => false);
   const currentStep = useState<PlaylistStep>('playlist-edit-step', () => PlaylistStep.Edit);
+  /** Возврат к попапу, из которого открыли редактирование. */
+  const onBack = useState<(() => void) | null>('playlist-edit-on-back', () => null);
 
   const openPlaylistEdit = (step: PlaylistStep, back: boolean = false, playlist?: IPlaylistCard, videoCard?: IVideoCard) => {
     selectedPlaylist.value = playlist;
@@ -17,13 +19,19 @@ export const usePlaylistEdit = () => {
     deletedVideo.value = videoCard;
   };
 
+  /** Закрывает попап целиком, минуя возврат на шаг редактирования. */
+  const closePlaylistEditAll = () => {
+    isPlaylistEditOpen.value = false;
+    isBackToEdit.value = false;
+    selectedPlaylist.value = undefined;
+    onBack.value = null;
+  };
+
   const closePlaylistEdit = () => {
     if (isBackToEdit.value) {
       openPlaylistEdit(PlaylistStep.Edit, false, selectedPlaylist.value);
     } else {
-      isPlaylistEditOpen.value = false;
-      isBackToEdit.value = false;
-      selectedPlaylist.value = undefined;
+      closePlaylistEditAll();
     }
   };
 
@@ -32,7 +40,9 @@ export const usePlaylistEdit = () => {
     currentStep,
     openPlaylistEdit,
     closePlaylistEdit,
+    closePlaylistEditAll,
     selectedPlaylist,
+    onBack,
     deletedVideo,
   };
 };

package/composables/use-snackbar.ts

@@ -36,7 +36,19 @@ export const useSnackbar = () => {
   const snackbarText = useState('snackbar-text', () => '');
   const snackbarHighlight = useState('snackbar-highlight', () => '');
   const snackbarActionText = useState('snackbar-action-text', () => '');
-  const isSnackBarInPopup = useState('snackbar-in-popup', () => false);
+  // Снекбар физически переезжает между открытым попапом и макетом: диалог лежит в top
+  // layer, поэтому снекбар из макета оказался бы под ним и под блюром. Счётчик, а не флаг —
+  // при закрытии вложенного попапа снекбар должен остаться в том, что ещё открыт.
+  const popupDepth = useState('snackbar-popup-depth', () => 0);
+  const isSnackBarInPopup = computed(() => popupDepth.value > 0);
+
+  function enterPopup() {
+    popupDepth.value++;
+  }
+
+  function leavePopup() {
+    popupDepth.value = Math.max(0, popupDepth.value - 1);
+  }
 
   function clearTimer() {
     if (dismissTimer) {
@@ -115,6 +127,8 @@ export const useSnackbar = () => {
     snackbarHighlight,
     snackbarActionText,
     isSnackBarInPopup,
+    enterPopup,
+    leavePopup,
     show,
     showError,
     setErrorState,

package/composables/use-user.ts

@@ -119,10 +119,6 @@ export const useUser = (apiService) => {
     const profile = useState<IProfileData | null>('profileData');
     profile.value = null;
 
-    const { favoritesId, favoritesFirstVideoId } = useFavorites();
-    favoritesId.value = null;
-    favoritesFirstVideoId.value = null;
-
     const router = useRouter();
     router.push(generateLink('/'));
   };

package/composables/use-video-collections.ts

@@ -7,17 +7,39 @@ export const useVideoCollections = () => {
   const favorites = useState<string[]>('video-collections-favorites', () => []);
   const watchLater = useState<string[]>('video-collections-watch-later', () => []);
 
+  const { show } = useSnackbar();
+
+  /** Возвращает true, если ролик добавлен, и false — если убран. */
   function toggle(list: Ref<string[]>, guid: string) {
-    list.value = list.value.includes(guid)
-      ? list.value.filter(item => item !== guid)
-      : [ ...list.value, guid ];
+    const added = !list.value.includes(guid);
+
+    list.value = added
+      ? [ ...list.value, guid ]
+      : list.value.filter(item => item !== guid);
+
+    return added;
+  }
+
+  // Снекбар показывается только на исходное действие: откат возвращает список как был,
+  // повторно сообщать об этом нечего — иначе отмена сама выглядит как новое изменение.
+  function notify(added: boolean, title: string, icon: string, undo: () => void) {
+    show(added ? 'added' : 'removed', {
+      icon,
+      highlight: title,
+      onAction: undo,
+    });
   }
 
   const isFavorite = (guid: string) => favorites.value.includes(guid);
   const isWatchLater = (guid: string) => watchLater.value.includes(guid);
 
-  const toggleFavorite = (guid: string) => toggle(favorites, guid);
-  const toggleWatchLater = (guid: string) => toggle(watchLater, guid);
+  const toggleFavorite = (guid: string, title = '') => {
+    notify(toggle(favorites, guid), title, 'heart', () => toggle(favorites, guid));
+  };
+
+  const toggleWatchLater = (guid: string, title = '') => {
+    notify(toggle(watchLater, guid), title, 'clock', () => toggle(watchLater, guid));
+  };
 
   return {
     favorites,

package/package.json

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

package/pages/following.vue

@@ -17,7 +17,7 @@
       :header-link-text="t('following.all_models')"
       all-link="/library/models"
       icon="user"
-      size="xl"
+      variant="section"
       placeholder-avatar="/img/model-placeholder.webp"
       class="following__section"
       without-count
@@ -32,7 +32,7 @@
       :header-link-text="t('following.all_channels')"
       all-link="/library/channels"
       icon="play-circle"
-      size="xl"
+      variant="section"
       placeholder-avatar="/img/logo-placeholder.svg"
       class="following__section"
       without-count
@@ -45,7 +45,7 @@
           :count="t('following.updates', { count: categoriesUpdates })"
           icon="grid"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
 
         <!-- На мобиле плитки «все» в гриде нет, поэтому ссылка вынесена в шапку -->
@@ -79,7 +79,7 @@
           :count="t('following.updates', { count: playlistsUpdates })"
           icon="playlist"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
 
         <UiLink

package/pages/history.vue

@@ -55,7 +55,7 @@
           class="history__group-header"
           icon="video-camera"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
 
         <div class="history__grid">

package/pages/library/index.vue

@@ -25,14 +25,14 @@
           :title="t('library.continue_watching')"
           icon="history"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
 
         <UiLink
           :to="generateLink('/history')"
           theme="secondary"
         >
-          {{ t('library.view_all_history') }}
+          {{ t('library.history') }}
           <UiIcon
             name="arrow-right"
             size="16"
@@ -61,7 +61,7 @@
           :title="t('library.collections')"
           icon="layers"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
       </header>
 
@@ -86,7 +86,7 @@
           :title="t('library.following')"
           icon="plus"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
 
         <UiLink