itube-specs 0.0.892 → 0.0.895

package/components/library/follows.vue

@@ -0,0 +1,147 @@
+<!-- Список подписок «Библиотеки»: сортировка, блоки лент, подтверждение отписки -->
+<template>
+  <div class="library-follows">
+    <UiSectionTitle
+      :title="title"
+      :count="items.length"
+      :icon="icon"
+      class="library-follows__title"
+    />
+
+    <div class="library-follows__sort">
+      <UiBtn
+        v-for="option in sortItems"
+        :key="option.name"
+        :theme="sort === option.name ? 'primary' : 'secondary'"
+        @click="sort = option.name"
+      >{{ option.title }}</UiBtn>
+    </div>
+
+    <div
+      v-if="sortedItems.length > 0"
+      class="library-follows__list"
+    >
+      <LibraryFeed
+        v-for="(item, index) in sortedItems"
+        :key="item.guid"
+        :item="item"
+        :following="isFollowing(item)"
+        :priority="index === 0"
+        @toggle-follow="onToggleFollow"
+      />
+    </div>
+
+    <UiEmptyState
+      v-else
+      without-reset
+    />
+
+    <UiConfirm
+      v-model="isUnfollowOpen"
+      :title="t('library.unfollow_title', { name: pendingUnfollow?.title })"
+      :confirm-text="t('library.unfollow_confirm')"
+      @confirm="onUnfollowConfirm"
+    >
+      <p class="library-follows__confirm">{{ t('library.unfollow_text') }}</p>
+    </UiConfirm>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ILibraryFeedItem } from '../../types';
+
+const LibrarySort = {
+  New: 'new',
+  Alphabet: 'alphabet',
+} as const;
+
+type LibrarySortValue = typeof LibrarySort[keyof typeof LibrarySort];
+
+const props = defineProps<{
+  items: ILibraryFeedItem[]
+  title: string
+  icon: string
+}>();
+
+const { t } = useI18n();
+
+const sort = ref<LibrarySortValue>(LibrarySort.New);
+
+const sortItems = computed(() => [
+  { name: LibrarySort.New, title: t('library.sort_new_first') },
+  { name: LibrarySort.Alphabet, title: t('library.sort_alphabet') },
+]);
+
+/**
+ * «Сначала новые» — по числу непросмотренных новинок, а не по дате обновления: подписка
+ * с тремя новыми роликами важнее свежей, но с одним. Порядок равных сохраняет сортировка.
+ */
+const sortedItems = computed(() => {
+  const items = [...props.items];
+
+  return sort.value === LibrarySort.Alphabet
+    ? items.sort((a, b) => a.title.localeCompare(b.title))
+    : items.sort((a, b) => b.newCount - a.newCount);
+});
+
+const unfollowed = ref<string[]>([]);
+
+function isFollowing(item: ILibraryFeedItem) {
+  return !unfollowed.value.includes(item.guid);
+}
+
+/** Сущность, для которой открыт попап отписки. */
+const pendingUnfollow = ref<ILibraryFeedItem | null>(null);
+
+const isUnfollowOpen = computed({
+  get: () => pendingUnfollow.value !== null,
+  set: value => {
+    if (!value) pendingUnfollow.value = null;
+  },
+});
+
+/** Подписка — сразу, отписка — только через подтверждение: она сносит ленту обновлений. */
+function onToggleFollow(item: ILibraryFeedItem) {
+  if (isFollowing(item)) {
+    pendingUnfollow.value = item;
+    return;
+  }
+
+  unfollowed.value = unfollowed.value.filter(guid => guid !== item.guid);
+}
+
+function onUnfollowConfirm() {
+  if (!pendingUnfollow.value) return;
+
+  unfollowed.value = [...unfollowed.value, pendingUnfollow.value.guid];
+  pendingUnfollow.value = null;
+}
+</script>
+
+<style lang="scss">
+.library-follows__title {
+  margin-bottom: 16px;
+}
+
+.library-follows__sort {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.library-follows__list {
+  display: grid;
+  row-gap: 24px;
+}
+
+.library-follows__confirm {
+  @include font-sm;
+
+  max-width: 400px;
+  margin: 0 auto;
+  text-align: center;
+  color: $page-library-confirm-text;
+}
+</style>

package/components/ui/expand-row.vue

@@ -5,6 +5,7 @@
       { '--expand-show': isExpandOpened },
       { '--alphabet': alphabet },
       { '--mobile-expand': mobileExpand },
+      { '--micro': micro },
     ]"
     class="ui-expand-row"
   >
@@ -27,12 +28,13 @@
           :alphabet="alphabet"
           is-link
           :mini="mini"
+          :micro="micro"
         />
       </slot>
       <div
         v-if="!hideMore"
         v-show="isElementsOverflow"
-        :class="{'--small': mini}"
+        :class="{'--small': mini, '--micro': micro}"
         class="ui-expand-row__more-wrapper"
       >
         <UiChips
@@ -41,6 +43,7 @@
             icon: isExpandOpened ? 'minus' : 'plus',
           }"
           :mini="mini"
+          :micro="micro"
           class="ui-expand-row__button --more"
           @click="onMoreClick"
         />
@@ -57,6 +60,7 @@ defineProps<{
   alphabet?: boolean;
   hideMore?: boolean;
   mini?: boolean;
+  micro?: boolean;
   mobileExpand?: boolean;
   preText?: string;
 }>();
@@ -167,6 +171,12 @@ onBeforeUnmount(() => {
   }
 }
 
+/* Обрезка идёт по высоте одной строки, а она зависит от размера чипса — иначе из-под края
+   выглядывает следующий ряд. Правило стоит до `--expand-show`: у них равная специфичность. */
+.ui-expand-row.--micro {
+  max-height: var(--chips-height-micro);
+}
+
 .ui-expand-row__wrapper {
   display: inline-flex;
   flex-wrap: wrap;
@@ -193,7 +203,7 @@ onBeforeUnmount(() => {
   height: var(--chips-height);
   z-index: $z-index-plus;
   padding-left: 40px;
-  background: linear-gradient(90deg, $expand-row-fade-start 0%, $expand-row-fade-end 22.64%);
+  background: linear-gradient(90deg, $expand-row-fade-start 0%, var(--expand-row-fade-end, #{$expand-row-fade-end}) 22.64%);
 }
 
 .ui-expand-row__more-wrapper.--small {
@@ -204,6 +214,15 @@ onBeforeUnmount(() => {
   }
 }
 
+.ui-expand-row__more-wrapper.--micro {
+  top: 0;
+  height: var(--chips-height-micro);
+}
+
+.ui-expand-row.--micro .ui-expand-row__wrapper {
+  gap: 4px;
+}
+
 .ui-expand-row__button.--more {
   text-transform: capitalize;
 }

package/components/ui/video-preview.vue

@@ -0,0 +1,62 @@
+<!-- Видео-предпросмотр (автоплей) поверх постера + индикатор загрузки -->
+<template>
+  <span
+    :class="{'_loading': !isPlaying}"
+    class="ui-video-preview"
+  >
+    <video
+      ref="videoRef"
+      :src="url"
+      :class="{'--playing': isPlaying}"
+      class="ui-video-preview__video"
+      loop
+      muted
+      autoplay
+      playsinline
+      @playing="isPlaying = true"
+      @waiting="isPlaying = false"
+      @pause="isPlaying = false"
+    />
+  </span>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  url: string
+}>();
+
+const videoRef = ref<HTMLVideoElement | null>(null);
+const isPlaying = ref(false);
+
+onMounted(() => {
+  const video = videoRef.value;
+  if (!video) return;
+
+  video.muted = true;
+  video.play().catch(() => {
+    isPlaying.value = false;
+  });
+});
+</script>
+
+<style lang="scss">
+.ui-video-preview {
+  --size: 40px;
+
+  position: absolute;
+  inset: 0;
+  z-index: $z-index-plus;
+}
+
+.ui-video-preview__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+}
+
+/* Пока автоплей не стартовал, браузер рисует поверх видео нативную кнопку плей — держим элемент невидимым */
+.ui-video-preview__video.--playing {
+  opacity: 1;
+}
+</style>

package/package.json

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

package/pages/library/categories.vue

@@ -0,0 +1,61 @@
+<!-- Подписки на категории: широкие показывают лучшее за неделю, узкие — новинки. Данные пока заглушка -->
+<template>
+  <div class="_page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <LibraryFollows
+      :items="items"
+      :title="t('library.my_categories')"
+      icon="grid"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getLibraryCategoriesStub } from '../../stubs/library-follows';
+import { convertString, formatDate } from '../../runtime';
+import type { IBreadcrumbItem, ILibraryFeedItem } from '../../types';
+
+const { t } = useI18n();
+const { generateLink } = useGenerateLink();
+
+const items = computed<ILibraryFeedItem[]>(() => getLibraryCategoriesStub().map(category => ({
+  guid: category.guid,
+  title: category.title,
+  to: generateLink(`/categories/${convertString().toSlug(category.title)}`),
+  newCount: category.newCount,
+  meta: [
+    { icon: 'video-camera', text: String(category.videosCount) },
+    { icon: 'date', text: t('library.updated_at', { date: formatDate(category.lastVideoAddedAt) }) },
+  ],
+  videosCount: category.videosCount,
+  // Нечего показать в новинках — лента откатывается на лучшее за неделю
+  feedTitle: category.newCount ? t('library.latest') : t('library.top_this_week'),
+  videos: category.videos,
+})));
+
+useNoindex();
+
+const { brandName } = useAppConfig();
+
+useHead(() => ({
+  title: `${t('library.my_categories')} — ${brandName}`,
+}));
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('navigation.library')}`,
+    to: '/library',
+  },
+  {
+    name: `${t('library.my_categories')}`,
+  },
+] as IBreadcrumbItem[];
+</script>

package/pages/library/channels.vue

@@ -0,0 +1,62 @@
+<!-- Подписки на каналы: аватар, теги, счётчик подписчиков, лента последних роликов. Данные пока заглушка -->
+<template>
+  <div class="_page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <LibraryFollows
+      :items="items"
+      :title="t('library.my_channels')"
+      icon="play-circle"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getLibraryChannelsStub } from '../../stubs/library-follows';
+import { convertString, formatDate } from '../../runtime';
+import type { IBreadcrumbItem, ILibraryFeedItem } from '../../types';
+
+const { t, n } = useI18n();
+const { generateLink } = useGenerateLink();
+
+const items = computed<ILibraryFeedItem[]>(() => getLibraryChannelsStub().map(channel => ({
+  guid: channel.guid,
+  title: channel.title,
+  to: generateLink(`/channels/${convertString().toSlug(channel.title)}`),
+  avatarUrl: channel.avatarUrl,
+  tags: channel.tags.map(tag => convertString().toChips(tag, 'tag')),
+  newCount: channel.newCount,
+  meta: [
+    { icon: 'video-camera', text: String(channel.videosCount) },
+    { icon: 'user-group', text: t('library.followers', { count: n(channel.followersCount, 'compact') }) },
+    { icon: 'date', text: t('library.updated_at', { date: formatDate(channel.lastVideoAddedAt) }) },
+  ],
+  videosCount: channel.videosCount,
+  videos: channel.videos,
+})));
+
+useNoindex();
+
+const { brandName } = useAppConfig();
+
+useHead(() => ({
+  title: `${t('library.my_channels')} — ${brandName}`,
+}));
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('navigation.library')}`,
+    to: '/library',
+  },
+  {
+    name: `${t('library.my_channels')}`,
+  },
+] as IBreadcrumbItem[];
+</script>