itube-specs 0.0.875 → 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/components/profile/delete.vue

@@ -8,8 +8,41 @@
       wide
       size="l"
       theme="warning"
-      @click="deleteProfile"
+      @click="isConfirmOpen = true"
     >{{ t('profile.delete_profile') }}</UiBtn>
+
+    <transition mode="out-in">
+      <UiPopup
+        v-if="isConfirmOpen"
+        v-model="isConfirmOpen"
+        sheet
+      >
+        <template #title>{{ $t('profile.delete_profile') }}</template>
+
+        <p class="profile-delete__confirm">{{ $t('confirm_delete_profile') }}</p>
+
+        <template #footer>
+          <div class="profile-delete__buttons">
+            <UiBtn
+              :disabled="loading"
+              wide
+              size="l"
+              theme="secondary"
+              @click="isConfirmOpen = false"
+            >{{ $t('cancel') }}
+            </UiBtn>
+            <UiBtn
+              :disabled="loading"
+              wide
+              size="l"
+              theme="warning"
+              @click="deleteProfile"
+            >{{ $t('yes') }}
+            </UiBtn>
+          </div>
+        </template>
+      </UiPopup>
+    </transition>
   </div>
 </template>
 
@@ -21,12 +54,14 @@ const { signOut } = useUser(AuthorizationApiService);
 const { showSuccess } = useSnackbar();
 
 const loading = ref(false);
+const isConfirmOpen = ref(false);
 
 async function deleteProfile() {
   try {
     loading.value = true;
     await AuthorizationApiService.deleteProfile();
-    showSuccess(t('snackbar.profile_deleted'));
+    isConfirmOpen.value = false;
+    showSuccess('profile_deleted');
     signOut();
   } catch (err) {
     console.log(err, 'error delete profile');
@@ -59,4 +94,20 @@ async function deleteProfile() {
 .profile-delete__button {
   height: 50px;
 }
+
+.profile-delete__confirm {
+  @include font-sm;
+
+  text-align: center;
+  max-width: 400px;
+}
+
+.profile-delete__buttons {
+  display: grid;
+  gap: 8px;
+
+  @include from-br(sm) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
 </style>

package/components/profile/setup.vue

@@ -196,7 +196,7 @@ async function deleteAvatar() {
     form.value.avatar = '';
     await getProfile(true);
     avatarPreview.value = '';
-    showSuccess(t('snackbar.avatar_deleted'));
+    showSuccess('avatar_deleted');
   } finally {
     deletingAvatar.value = false;
   }

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.875",
+  "version": "0.0.877",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/pages/user/profile.vue

@@ -108,16 +108,6 @@ const items = computed<Array<IDataItem>>(() => {
       text: data.value.gender?.title ?? '',
       icon: 'double-user'
     },
-    {
-      title: t('profile.gender'),
-      text: data.value.gender?.title ?? '',
-      icon: 'double-user'
-    },
-    {
-      title: t('profile.gender'),
-      text: data.value.gender?.title ?? '',
-      icon: 'double-user'
-    },
   ];
 });