itube-specs 0.0.876 → 0.0.877

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/package.json

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