itube-specs 0.0.876 → 0.0.878

package/assets/icons/common/history.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg>

package/assets/icons/common/library.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M9 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M5 8h4"></path><path d="M9 16h4"></path><path d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041z"></path><path d="M14 9l4 -1"></path><path d="M16 16l3.923 -.98"></path></svg>

package/assets/icons/common/playlist.svg

@@ -0,0 +1 @@
+<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/base/_hacks.scss

@@ -15,9 +15,7 @@ select:-webkit-autofill:focus {
   box-shadow: 0 0 0 1000px transparent inset !important;
   -webkit-text-fill-color: var(--input-autofill-text, #{$input-autofill-text}) !important;
   color: var(--input-autofill-text, #{$input-autofill-text}) !important;
-  border: none !important;
   transition: background-color 5000s ease-in-out 0s !important;
-  font-size: inherit !important;
 }
 
 /**

package/components/player/playlist.vue

@@ -58,7 +58,7 @@
               :class="{'--active': playMode === 'cycle'}"
               class="player-playlist__play-button"
               type="button"
-              @click="playMode = 'cycle'"
+              @click="setPlayMode('cycle')"
             >
               <UiIcon
                 name="cycle"
@@ -69,7 +69,7 @@
               :class="{'--active': playMode === 'random'}"
               class="player-playlist__play-button"
               type="button"
-              @click="playMode = 'random'"
+              @click="setPlayMode('random')"
             >
               <UiIcon
                 name="random"
@@ -188,7 +188,7 @@ const userProfileData = computed(() => useState<IProfileData>('profileData').val
 const isOwner = computed(() => isAuthorized.value && !!userProfileData.value?.username && userProfileData.value.username === props.user);
 
 const slug = useSlug();
-const playMode = useState<'cycle' | 'random'>('playlistMode', () => 'cycle');
+const { mode: playMode, setMode: setPlayMode } = usePlaylistMode();
 
 const currentIndex = computed(() => {
   const idx = visibleItems.value.findIndex(item => String(item.id) === String(slug.value));

package/composables/use-next-video.ts

@@ -34,6 +34,12 @@ export function useNextVideo({ data, suggestedVideos, basePath }: UseNextVideoPa
   const cardKey = computed<'url' | 'id'>(() => featureFlags.FetchByUrlEnabled ? 'url' : 'id');
   const currentCardId = computed(() => String(route.query.view || data()?.[cardKey.value] || ''));
 
+  // Режим воспроизведения плейлиста (тумблеры cycle/random в PlayerPlaylist).
+  // Random работает только на странице плейлиста — на обычной странице видео related
+  // всегда идёт по порядку.
+  const { mode: playMode } = usePlaylistMode();
+  const isRandom = computed(() => !!basePath() && playMode.value === 'random');
+
   const currentItems = computed<IVideoCard[]>(() => suggestedVideos()?.items ?? []);
   const currentPage = computed(() => suggestedVideos()?.currentPage ?? 1);
   const allPages = computed(() => suggestedVideos()?.allPages ?? 1);
@@ -51,12 +57,27 @@ export function useNextVideo({ data, suggestedVideos, basePath }: UseNextVideoPa
     nextPageItems.value = [];
   }, { immediate: true });
 
+  // Случайный ролик в режиме random. Индекс фиксируем в ref и перекатываем при смене
+  // текущего ролика/списка/режима — чтобы ховер-превью и реальный переход вели на один
+  // и тот же ролик. Только на клиенте: Math.random в SSR даст рассинхрон гидрации.
+  // Текущий ролик в playlistUpcoming уже исключён, так что попасть в себя нельзя.
+  const randomIndex = ref(0);
+
+  if (import.meta.client) {
+    watch([currentCardId, currentItems, isRandom], () => {
+      const length = currentItems.value.length;
+      randomIndex.value = length > 1 ? Math.floor(Math.random() * length) : 0;
+    }, { immediate: true });
+  }
+
   // Следующий ролик: за текущим в текущем листе; на конце листа — первый следующей
   // страницы (если догружена); на самом конце всех страниц — первый ролик вообще.
   const nextVideo = computed<IVideoCard | undefined>(() => {
     const items = currentItems.value;
     if (!items.length) return undefined;
 
+    if (isRandom.value) return items[randomIndex.value] ?? items[0];
+
     const idx = currentIndex.value;
     if (idx === -1) return items[0];
     if (idx + 1 < items.length) return items[idx + 1];

package/composables/use-playlist-mode.ts

@@ -0,0 +1,31 @@
+export type PlaylistMode = 'cycle' | 'random';
+
+const STORAGE_KEY = 'playlist-mode';
+
+function isPlaylistMode(value: unknown): value is PlaylistMode {
+  return value === 'cycle' || value === 'random';
+}
+
+/**
+ * Режим воспроизведения плейлиста (cycle/random). Состояние общее для тумблеров в
+ * PlayerPlaylist и логики next в useNextVideo, переживает перезагрузку — хранится в
+ * localStorage.
+ *
+ * Восстанавливаем в onMounted, а не в setup: на сервере localStorage нет, а правка
+ * значения до гидрации разошлась бы с отрендеренной разметкой (--active на тумблере).
+ */
+export function usePlaylistMode() {
+  const mode = useState<PlaylistMode>('playlistMode', () => 'cycle');
+
+  onMounted(() => {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (isPlaylistMode(saved)) mode.value = saved;
+  });
+
+  function setMode(value: PlaylistMode): void {
+    mode.value = value;
+    if (import.meta.client) localStorage.setItem(STORAGE_KEY, value);
+  }
+
+  return { mode, setMode };
+}

package/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <Html :lang="htmlAttrs.lang">
     <div class="layout">
-      <LayoutSkipLink/>
+      <!-- <LayoutSkipLink/> -->
 
       <LayoutHeader class="header"/>
 

package/lib/scheme/navigation-items.ts

@@ -28,7 +28,7 @@ export function getNavigationItems(): INavigationItems[] {
     {
       title: 'playlists',
       link: '/playlists',
-      icon: 'list',
+      icon: 'playlist',
     },
     ...(featureFlags.FeatureLiveEnabled ? [{
       title: 'live_sex',
@@ -38,41 +38,15 @@ export function getNavigationItems(): INavigationItems[] {
     }] : []),
     ...(featureFlags.FeatureHistoryEnabled ? [{
       title: 'history',
-      link: '/2257',
-      icon: 'time',
+      link: '/history',
+      icon: 'history',
       top: true,
     }] : []),
     ...(featureFlags.FeatureFavoritesEnabled ? [{
-      title: 'favorites',
-      icon: 'heart',
+      title: 'library',
+      link: '/library',
+      icon: 'library',
       top: true,
-      childs: [
-        {
-          title: 'videos',
-          icon: 'video-camera',
-          link: '/favorites',
-        },
-        {
-          title: 'watch_later',
-          icon: 'time',
-          link: '/2257',
-        },
-        {
-          title: 'playlists',
-          icon: 'list',
-          link: '/2257',
-        },
-        {
-          title: 'models',
-          icon: 'user',
-          link: '/2257',
-        },
-        {
-          title: 'channels',
-          icon: 'play-circle',
-          link: '/2257',
-        },
-      ],
     }] : []),
   ];
 }

package/lib/scheme/profile-navigation-items.ts

@@ -7,8 +7,8 @@ export const profileNavigationItems = [
   },
   {
     value: '/user/profile?edit=true',
-    title: 'favorites',
-    icon: 'heart',
+    title: 'library',
+    icon: 'library',
     group: 1,
     childs: [
       {
@@ -41,7 +41,7 @@ export const profileNavigationItems = [
   {
     value: '/user/settings',
     title: 'edit_profile',
-    icon: 'settings',
+    icon: 'edit',
     group: 2,
   },
 ];

package/package.json

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

package/pages/history.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="history"/>
+</template>
+
+<script setup lang="ts">
+</script>

package/pages/library.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="library"/>
+</template>
+
+<script setup lang="ts">
+</script>