itube-specs 0.0.914 → 0.0.915

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

@@ -592,8 +592,6 @@ $label-primary-bg: $color-indigo-600;
 $label-primary-text: $color-white;
 $label-gradient-bg: $color-indigo-600;
 $label-gradient-text: $color-white;
-$label-yellow-bg: $color-amber-500;
-$label-yellow-text: $mono-black-100;
 $label-green-bg: $color-green-500;
 $label-green-text: $color-white;
 $label-white-bg: $mono-white-75;

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

@@ -643,8 +643,6 @@ $label-primary-bg: $color-indigo-600;
 $label-primary-text: $color-white;
 $label-gradient-bg: $color-indigo-600;
 $label-gradient-text: $color-white;
-$label-yellow-bg: $color-amber-500;
-$label-yellow-text: $mono-black-100;
 $label-green-bg: $color-green-500;
 $label-green-text: $color-white;
 $label-white-bg: $mono-white-75;

package/components/card/playlist.vue

@@ -135,6 +135,17 @@
               />
             </template>
             <template #items="className">
+              <button
+                :class="className"
+                type="button"
+                @click="toggleFavorite(card.id, card.name)"
+              >
+                <UiIcon
+                  name="heart-stroke"
+                  size="16"
+                />
+                {{ favoritesLabel }}
+              </button>
               <button
                 :class="className"
                 type="button"
@@ -180,7 +191,7 @@ import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 const props = defineProps<{
   card: IPlaylistCard
   topPlaylists?: boolean
-  /** Без меню «три точки» — вместе с ним уходят share и report */
+  /** Без меню «три точки» — вместе с ним уходят избранное, share и report */
   noActions?: boolean
   priority?: boolean
 }>();
@@ -205,6 +216,23 @@ const userProfileData = computed(() => useState<IProfileData>('profileData').val
 
 const { isAuthorized } = useUser(AuthorizationApiService);
 
+const { isFavorite, toggleFavorite } = usePlaylistCollections();
+
+const favorite = computed(() => isFavorite(props.card.id));
+
+// Тем же кликом, что переключает коллекцию, меню закрывается. Если менять надпись сразу, она
+// дёргается прямо во время анимации закрытия, поэтому в меню живёт снапшот состояния — он
+// догоняет реальное только к следующему открытию, когда пункт всё равно перерисовывается с нуля.
+const shownFavorite = ref(favorite.value);
+
+const favoritesLabel = computed(() => shownFavorite.value
+  ? t('video_actions.remove_favorites')
+  : t('video_actions.add_favorites'));
+
+watch(() => dropdownRef.value?.open, (isOpen) => {
+  if (isOpen) shownFavorite.value = favorite.value;
+});
+
 const avatar = computed(() => {
   if (isAuthorized.value && props.topPlaylists && userProfileData.value?.avatar) {
     return userProfileData.value.avatar;

package/components/card/round.vue

@@ -70,10 +70,11 @@ function onImageError() {
 </script>
 
 <style lang="scss">
-/* Заход бейджа внутрь круга. На мобиле меньше: аватар там 80px против 96px, а сам
-   бейдж не уменьшается — при одинаковом отступе он садится заметно глубже. */
-$badge-inset: 8px;
-$badge-inset--mobile: 4px;
+/* Заход бейджа внутрь круга: отступ от угла карточки подобран так, чтобы центр
+   бейджа сел на границу окружности по диагонали — примерно половина снаружи.
+   На мобиле аватар 80px против 96px, а бейдж не уменьшается, поэтому отступ меньше. */
+$badge-inset: 3px;
+$badge-inset--mobile: 1px;
 
 .card-round {
   position: relative;

package/components/ui/label.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 withDefaults(
     defineProps<{
-      theme?: 'default' | 'primary' | 'primary-gradient' | 'yellow' | 'green' | 'white' | 'black' | 'backdrop' | 'secondary' | 'success' | 'blur' | 'grey'
+      theme?: 'default' | 'primary' | 'primary-gradient' | 'green' | 'white' | 'black' | 'backdrop' | 'secondary' | 'success' | 'blur' | 'grey'
       text: string | number
     }>(), {
       theme: 'default'
@@ -47,15 +47,6 @@ withDefaults(
   color: $label-gradient-text;
 }
 
-.ui-label.--yellow {
-  @include font-3xs;
-
-  background: $label-yellow-bg;
-  color: $label-yellow-text;
-  height: 15px;
-  display: inline-block;
-}
-
 .ui-label.--green {
   background-color: $label-green-bg;
   color: $label-green-text;

package/components/view/video.vue

@@ -4,12 +4,6 @@
     <header class="view-video__header">
       <h1 class="view-video__title">
         <span class="_truncate">{{ data.title }}</span>
-        <UiLabel
-          v-if="data.quality"
-          :text="data.quality"
-          class="view-video__title-label"
-          theme="yellow"
-        />
       </h1>
       <div class="view-video__header-wrapper">
         <UiExpandRow
@@ -248,12 +242,6 @@ function getModelChips(model: IVideoData['models'][number], index: number): IChi
   letter-spacing: var(--tracking-wide);
 }
 
-.view-video__title-label {
-  display: inline;
-  vertical-align: middle;
-  margin-left: 12px;
-}
-
 .view-video__header-wrapper {
   margin-bottom: 16px;
 }

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

@@ -0,0 +1,63 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { usePlaylistCollections } from '../use-playlist-collections';
+import { useVideoCollections } from '../use-video-collections';
+import { useSnackbar } from '../use-snackbar';
+
+describe('usePlaylistCollections', () => {
+  beforeEach(() => {
+    useNuxtApp().payload.state = {};
+    vi.useFakeTimers();
+    useSnackbar().resetSnackbar();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('добавляет в избранное и показывает снекбар с кнопкой отмены', () => {
+    const { favorites, isFavorite, toggleFavorite } = usePlaylistCollections();
+    const { snackbarText, snackbarIcon, snackbarHighlight, snackbarActionText } = useSnackbar();
+
+    toggleFavorite('playlist-1', 'Playlist name');
+
+    expect(favorites.value).toEqual([ 'playlist-1' ]);
+    expect(isFavorite('playlist-1')).toBe(true);
+    expect(snackbarText.value).toBe('added');
+    expect(snackbarIcon.value).toBe('heart');
+    expect(snackbarHighlight.value).toBe('Playlist name');
+    expect(snackbarActionText.value).toBe('undo');
+  });
+
+  it('удаление показывает снекбар «removed»', () => {
+    const { favorites, toggleFavorite } = usePlaylistCollections();
+    const { snackbarText } = useSnackbar();
+
+    toggleFavorite('playlist-1', 'Playlist name');
+    toggleFavorite('playlist-1', 'Playlist name');
+
+    expect(favorites.value).toEqual([]);
+    expect(snackbarText.value).toBe('removed');
+  });
+
+  it('отмена возвращает список и не показывает новый снекбар', () => {
+    const { favorites, toggleFavorite } = usePlaylistCollections();
+    const { runSnackbarAction, snackbarText } = useSnackbar();
+
+    toggleFavorite('playlist-2', 'Another name');
+    runSnackbarAction();
+
+    expect(favorites.value).toEqual([]);
+    expect(snackbarText.value).toBe('');
+  });
+
+  it('избранные плейлисты не смешиваются с избранными видео', () => {
+    const { favorites: playlistFavorites, toggleFavorite: togglePlaylist } = usePlaylistCollections();
+    const { favorites: videoFavorites } = useVideoCollections();
+
+    togglePlaylist('playlist-3', 'Third name');
+
+    expect(playlistFavorites.value).toEqual([ 'playlist-3' ]);
+    expect(videoFavorites.value).toEqual([]);
+  });
+});

package/composables/use-playlist-collections.ts

@@ -0,0 +1,39 @@
+/**
+ * Заглушка избранных плейлистов — механика та же, что у видео (см. `useVideoCollections`),
+ * но список свой: плейлист не ролик, и на странице избранного они не должны смешиваться.
+ * Ручек в API пока нет, поэтому состояние живёт только на клиенте и сбрасывается при перезагрузке.
+ */
+export const usePlaylistCollections = () => {
+  const favorites = useState<string[]>('playlist-collections-favorites', () => []);
+
+  const { show } = useSnackbar();
+
+  /** Возвращает true, если плейлист добавлен, и false — если убран. */
+  function toggle(id: string) {
+    const added = !favorites.value.includes(id);
+
+    favorites.value = added
+      ? [ ...favorites.value, id ]
+      : favorites.value.filter(item => item !== id);
+
+    return added;
+  }
+
+  const isFavorite = (id: string) => favorites.value.includes(id);
+
+  // Снекбар показывается только на исходное действие: откат возвращает список как был,
+  // повторно сообщать об этом нечего — иначе отмена сама выглядит как новое изменение.
+  const toggleFavorite = (id: string, name = '') => {
+    show(toggle(id) ? 'added' : 'removed', {
+      icon: 'heart',
+      highlight: name,
+      onAction: () => toggle(id),
+    });
+  };
+
+  return {
+    favorites,
+    isFavorite,
+    toggleFavorite,
+  };
+};

package/package.json

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

package/runtime/utils/cleaners/__tests__/clean-video-card.test.ts

@@ -5,7 +5,6 @@ describe('cleanVideoCard', () => {
   it('полные данные', () => {
     const raw = {
       guid: 'v-1',
-      quality: '1080p',
       duration: 600,
       title: 'Video Title',
       views: 1000,
@@ -27,7 +26,6 @@ describe('cleanVideoCard', () => {
     };
     const result = cleanVideoCard(raw as any);
     expect(result.guid).toBe('v-1');
-    expect(result.quality).toBe('1080p');
     expect(result.isNew).toBe(true);
     expect(result.channelName).toBe('Channel');
     expect(result.channelAvatar).toBe('https://img.com/ch.jpg');
@@ -44,7 +42,6 @@ describe('cleanVideoCard', () => {
   it('пустые данные → дефолты', () => {
     const result = cleanVideoCard({} as any);
     expect(result.guid).toBe('');
-    expect(result.quality).toBe('');
     expect(result.duration).toBe(0);
     expect(result.views).toBe(0);
     expect(result.isNew).toBe(false);

package/runtime/utils/cleaners/__tests__/clean-video-data.test.ts

@@ -6,7 +6,6 @@ describe('cleanVideoData', () => {
     const raw = {
       guid: 'v-1',
       md5: 'abc',
-      quality: '1080p',
       duration: 600,
       title: 'Title',
       header: 'Header',

package/runtime/utils/cleaners/clean-video-card.ts

@@ -4,7 +4,6 @@ import { ThumbSize } from '../../constants/thumb-size';
 /** Нормализует сырую карточку видео к типу IVideoCard. */
 export const cleanVideoCard = (card: IRawVideoCard): IVideoCard => ({
   guid: card.guid || '',
-  quality: card.quality || '',
   duration: card.duration || 0,
   title: card.title || '',
   views: card.views || 0,

package/runtime/utils/cleaners/clean-video-data.ts

@@ -39,7 +39,6 @@ const cleanHotspots = (raw: string[] | null): number[] | null => {
 export const cleanVideoData = (data: IRawVideoData): IVideoData => ({
   guid: data.guid || '',
   md5: data.md5 || '',
-  quality: data.quality || '',
   duration: data.duration || 0,
   title: data.title || '',
   header: data.header || '',

package/stubs/history.ts

@@ -11,7 +11,6 @@ export type HistoryStubCard = {
   duration: number;
   thumbUrls: IThumbUrls;
   previewUrl: string;
-  quality?: string;
   channelName?: string;
   channelAvatar?: string;
   /** Доля просмотренного, 0–100 */

package/stubs/videos.ts

@@ -5,7 +5,6 @@ export type StubVideo = {
   id: string;
   title: string;
   duration: number;
-  quality?: string;
   thumbUrls: IThumbUrls;
   previewUrl: string;
   channelName?: string;
@@ -15,7 +14,7 @@ export type StubVideo = {
 /** Общий пул роликов для всех заглушек — порядок фиксирован, на него завязаны наборы-надстройки. */
 export const VIDEO_POOL: StubVideo[] = [
   { id: '445839845', title: 'Drew Sebastian Barebacks Nick Fitt: Muscle Daddy Tops Athletic Bottom on the Couch', duration: 486, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/a/8/d/a8dc253cad705d688508de096435a989/thumbs/320x180/3.webp', '480x270': 'https://nlt01.gay.cool/a/8/d/a8dc253cad705d688508de096435a989/thumbs/480x270/3.webp' } }, channelName: 'Icon Male', channelAvatar: 'https://nli01.joystorage.com/c/0/2/c02a3f8ef14943b5f3da537aaed46fcc.jpeg', previewUrl: 'https://nlp02.gay.cool/a/8/d/a8dc253cad705d688508de096435a989/preview/video.mp4' },
-  { id: '171708405', title: 'Bareback bathroom fisting with black latex gloves, rimming, piss play and anal gape', duration: 358, quality: '1080', thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/thumbs/320x180/33.webp', '480x270': 'https://nlt03.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/thumbs/480x270/33.webp' } }, previewUrl: 'https://nlp02.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/preview/video.mp4' },
+  { id: '171708405', title: 'Bareback bathroom fisting with black latex gloves, rimming, piss play and anal gape', duration: 358, thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/thumbs/320x180/33.webp', '480x270': 'https://nlt03.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/thumbs/480x270/33.webp' } }, previewUrl: 'https://nlp02.gay.cool/b/7/5/b75c1bf33571126845502e2b9bb5d687/preview/video.mp4' },
   { id: '374534215', title: 'Jake Davis Takes Bareback Anal in Blue Harness from Athletic Partner', duration: 487, thumbUrls: { webp: { '320x180': 'https://nlt02.gay.cool/2/4/6/246f577796c7c955b8df94f6454de2a5/thumbs/320x180/12.webp', '480x270': 'https://nlt02.gay.cool/2/4/6/246f577796c7c955b8df94f6454de2a5/thumbs/480x270/12.webp' } }, channelName: 'Icon Male', channelAvatar: 'https://nli01.joystorage.com/c/0/2/c02a3f8ef14943b5f3da537aaed46fcc.jpeg', previewUrl: 'https://nlp05.gay.cool/2/4/6/246f577796c7c955b8df94f6454de2a5/preview/video.mp4' },
   { id: '3377550', title: 'Rego Bello and Devin Adams bareback bedroom flip: reciprocal oral then Devin tops Rego', duration: 426, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/3/e/b/3eb0f19f1e600a98a7f5a5e51edc4b46/thumbs/320x180/33.webp', '480x270': 'https://nlt01.gay.cool/3/e/b/3eb0f19f1e600a98a7f5a5e51edc4b46/thumbs/480x270/33.webp' } }, previewUrl: 'https://nlp05.gay.cool/3/e/b/3eb0f19f1e600a98a7f5a5e51edc4b46/preview/video.mp4' },
   { id: '443170695', title: 'Johnny Rapid and Malakai White lead four-man hotel bareback with Max Lorde and Kyler Drayke', duration: 487, thumbUrls: { webp: { '320x180': 'https://nlt04.gay.cool/9/f/f/9ff067b9ea8b157ff2478667423ff9bb/thumbs/320x180/29.webp', '480x270': 'https://nlt04.gay.cool/9/f/f/9ff067b9ea8b157ff2478667423ff9bb/thumbs/480x270/29.webp' } }, channelName: 'Johnny Rapid', channelAvatar: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', previewUrl: 'https://nlp01.gay.cool/9/f/f/9ff067b9ea8b157ff2478667423ff9bb/preview/video.mp4' },
@@ -25,5 +24,5 @@ export const VIDEO_POOL: StubVideo[] = [
   { id: '444068845', title: 'Dean Young Bareback Flip Fuck: Versatile Anal, Deepthroat and Rimming in the Bedroom', duration: 604, thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/7/d/a/7daacbe876b51c7cdc50101b0d504be8/thumbs/320x180/16.webp', '480x270': 'https://nlt03.gay.cool/7/d/a/7daacbe876b51c7cdc50101b0d504be8/thumbs/480x270/16.webp' } }, previewUrl: 'https://nlp03.gay.cool/7/d/a/7daacbe876b51c7cdc50101b0d504be8/preview/video.mp4' },
   { id: '374968825', title: 'Brody Fox sucks and rides daddy Cain Marko bareback', duration: 497, thumbUrls: { webp: { '320x180': 'https://nlt01.gay.cool/9/e/2/9e23f59e882e860da3ab2400d93ac73e/thumbs/320x180/10.webp', '480x270': 'https://nlt01.gay.cool/9/e/2/9e23f59e882e860da3ab2400d93ac73e/thumbs/480x270/10.webp' } }, previewUrl: 'https://nlp03.gay.cool/9/e/2/9e23f59e882e860da3ab2400d93ac73e/preview/video.mp4' },
   { id: '377844995', title: 'Rick Lovatelli: blond twink dominated, deepthroats and gets barebacked by a suited bearded top', duration: 1627, thumbUrls: { webp: { '320x180': 'https://nlt05.gay.cool/f/1/b/f1b09d77a2e23f4b4696d97169614099/thumbs/320x180/25.webp', '480x270': 'https://nlt05.gay.cool/f/1/b/f1b09d77a2e23f4b4696d97169614099/thumbs/480x270/25.webp' } }, previewUrl: 'https://nlp01.gay.cool/f/1/b/f1b09d77a2e23f4b4696d97169614099/preview/video.mp4' },
-  { id: '375132285', title: 'Viktor Rom and Jordan Fox bareback blue-haired bottom in bedroom threesome', duration: 800, quality: '1080', thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/thumbs/320x180/1.webp', '480x270': 'https://nlt03.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/thumbs/480x270/1.webp' } }, previewUrl: 'https://nlp04.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/preview/video.mp4' },
+  { id: '375132285', title: 'Viktor Rom and Jordan Fox bareback blue-haired bottom in bedroom threesome', duration: 800, thumbUrls: { webp: { '320x180': 'https://nlt03.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/thumbs/320x180/1.webp', '480x270': 'https://nlt03.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/thumbs/480x270/1.webp' } }, previewUrl: 'https://nlp04.gay.cool/5/f/b/5fbcdd007476cd0a1e9c85abc9fc0042/preview/video.mp4' },
 ];

package/types/raw/raw-video-card.d.ts

@@ -37,7 +37,7 @@ interface IChannelVideo {
 export interface IRawVideoCard {
   guid: string;
   md5: string; // unused
-  quality: string;
+  quality: string; // unused
   orientation: string; // unused
   duration: number;
   created: number; // unused

package/types/raw/raw-video-data.d.ts

@@ -4,7 +4,7 @@ import type { ITimelineGroup } from '../video-data';
 export interface IRawVideoData {
   guid: string;
   md5: string;
-  quality: string;
+  quality: string;            // unused
   orientation: string;        // unused
   duration: number;
   created: number;            // unused

package/types/video-card.d.ts

@@ -2,7 +2,6 @@ import type { IThumbUrls } from '~/types/thumbs-urls';
 
 export interface IVideoCard {
   guid: string;
-  quality?: string;
   duration: number;
   title: string;
   views?: number;

package/types/video-data.d.ts

@@ -32,7 +32,6 @@ export interface ISceneGroup {
 export interface IVideoData {
     guid: string;
     md5: string;
-    quality: string;
     duration: number;
     title: string;
     header: string;