itube-specs 0.0.911 → 0.0.913

package/pages/playlists/index.vue

@@ -13,7 +13,7 @@
         v-if="h1"
         :title="h1"
         :count="publicData.items.length"
-        icon="list"
+        icon="playlist"
       />
 
       <UiLink
@@ -25,7 +25,7 @@
           name="playlist"
           size="16"
         />
-        {{ $t('my_playlists_count', { count: myPlaylistsCount }) }}
+        {{ $t('my_playlists') }} (3)
         <UiIcon
           name="arrow-right"
           size="16"
@@ -33,33 +33,13 @@
       </UiLink>
     </header>
 
-    <ClientOnly>
-      <template v-if="isAuthorized && filteredUserItems && filteredUserItems.length > 0">
-        <UiSectionTitle
-          :title="$t('my_playlists')"
-          :count="filteredUserItems.length"
-          class="playlists__title"
-          title-tag="h2"
-          size="xl"
-          icon="clapperboard-play"
-        />
-
-        <GridPlaylists
-          :items="filteredUserItems"
-          class="playlists__user-playlist"
-          top-playlists
-          priority
-        />
-      </template>
-    </ClientOnly>
-
     <SectionCollections :data-items="publicData.items"/>
 
     <UiSectionTitle
       :title="$t('user_playlists')"
       class="playlists__title"
       title-tag="h2"
-      size="xl"
+      variant="section"
     />
 
     <SectionNavLinks
@@ -76,7 +56,7 @@
     >
       <GridPlaylists
         :items="publicData.items"
-        :priority="!filteredUserItems || filteredUserItems.length === 0"
+        priority
       />
     </div>
 
@@ -98,59 +78,16 @@
 </template>
 
 <script setup lang="ts">
-import type { Language } from '../../runtime';
-import { AsyncData } from '../../runtime';
 import { sortPlaylists } from '../../lib';
-import type { IBreadcrumbItem, IPlaylistCard } from '../../types';
-import { AuthorizationApiService } from '../../services/api/authorization.service';
+import type { IBreadcrumbItem } from '../../types';
 import { PlaylistsApiService } from '../../services/api/playlists.service';
 
-const { locale } = useI18n();
-const lang = locale.value as Language;
-
 const { data: publicData, status } = await useFetchPlaylistsByNiche(PlaylistsApiService.getPlaylistByNiche);
 
-const { isAuthorized } = useUser(AuthorizationApiService);
-
-const { execute: fetchMyPlaylists } = useApiAction(
-    PlaylistsApiService.getUserPlaylists,
-    true
-);
-
-const { FAVORITES_KEY } = useFavorites();
-const userDataState = useState(`data-${AsyncData.GetPlaylists}`);
-const filteredUserItems = computed(() =>
-  userDataState.value?.items?.filter((item: IPlaylistCard) => item.name !== FAVORITES_KEY)
-);
-
-const { data, refresh: refreshUserData } = useAsyncData(
-    AsyncData.GetPlaylists,
-    () => fetchMyPlaylists([lang]),
-    {
-      immediate: false,
-    }
-);
-
-watch(
-    () => isAuthorized.value,
-    async (val) => {
-      if (val) {
-        await refreshUserData();
-        userDataState.value = data.value;
-      } else {
-        userDataState.value = null;
-      }
-    },
-    { immediate: true }
-);
-
 const { t } = useI18n();
 
 const { generateLink } = useGenerateLink();
 
-/** До загрузки своих плейлистов (и у гостя) в скобках 0 */
-const myPlaylistsCount = computed(() => filteredUserItems.value?.length ?? 0);
-
 const pagePureName = useGetPureRouteName();
 const { meta, h1 } = useMeta({
   t,
@@ -180,7 +117,7 @@ const breadcrumbs = [
   flex-direction: column;
   align-items: flex-start;
   row-gap: 12px;
-  margin-bottom: 24px;
+  margin-bottom: 32px;
 
   @include from-br(xm) {
     flex-direction: row;
@@ -195,16 +132,10 @@ const breadcrumbs = [
 }
 
 .playlists__title {
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .playlists__navigation {
   margin-bottom: 32px;
 }
-
-.playlists__user-playlist {
-  margin-bottom: 32px;
-  padding-bottom: 32px;
-  border-bottom: 1px solid $page-playlists-border;
-}
 </style>

package/runtime/constants/playlist-type.ts

@@ -4,3 +4,8 @@ export const PlaylistType = {
 } as const;
 
 export type PlaylistType = typeof PlaylistType[keyof typeof PlaylistType];
+
+export const PLAYLIST_TYPE_ICON: Record<PlaylistType, string> = {
+  [PlaylistType.Public]: 'earth',
+  [PlaylistType.Private]: 'lock',
+};

package/components/playlist/private-toggle.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="playlist-private-toggle">
-    <UiToggle
-      :model-value="modelValue"
-      class="playlist-private-toggle__toggler"
-      @update:model-value="(value: boolean) => emit('update:modelValue', value)"
-    />
-    <p class="playlist-private-toggle__text">{{ $t('playlist.private_playlist')}}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  modelValue: boolean
-}>();
-
-const emit = defineEmits<{
-  (eventName: 'update:modelValue', value: boolean): void
-}>();
-</script>

package/composables/use-favorites.ts

@@ -1,20 +0,0 @@
-export const FAVORITES_KEY = 'favorites';
-
-/** Управляет состоянием плейлиста избранного: id, первое видео и вычисляемая ссылка на плейлист. */
-export const useFavorites = () => {
-  const favoritesId = useState<string | null>('favorites-playlist-id', () => null);
-  const favoritesFirstVideoId = useState<string | null>('favorites-first-video-id', () => null);
-
-  const favoritesLink = computed(() =>
-    favoritesId.value && favoritesFirstVideoId.value
-      ? `/playlists/${favoritesId.value}/${favoritesFirstVideoId.value}`
-      : null
-  );
-
-  return {
-    FAVORITES_KEY,
-    favoritesId,
-    favoritesFirstVideoId,
-    favoritesLink,
-  };
-};

package/pages/favorites.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="_page _container _loading" />
-</template>
-
-<script setup lang="ts">
-import { PlaylistsApiService } from '../services/api/playlists.service';
-import type { Language } from '../runtime';
-
-const { locale } = useI18n();
-const { generateLink } = useGenerateLink();
-const cookie = useCookie('jwtoken');
-
-if (!cookie.value) {
-  await navigateTo(generateLink('/playlists'), { replace: true });
-} else {
-  try {
-    const res = await PlaylistsApiService.getUserPlaylists(locale.value as Language);
-    const fav = res?.items?.find(item => item.name === 'favorites');
-
-    if (fav?.id && fav?.firstVideoId) {
-      await navigateTo(generateLink(`/playlists/${fav.id}/${fav.firstVideoId}`), { replace: true });
-    } else if (fav?.id) {
-      await navigateTo(generateLink(`/playlists/${fav.id}`), { replace: true });
-    } else {
-      await navigateTo(generateLink('/playlists'), { replace: true });
-    }
-  } catch {
-    await navigateTo(generateLink('/playlists'), { replace: true });
-  }
-}
-</script>