itube-specs 0.0.902 → 0.0.910

package/components/library/feed.vue

@@ -59,6 +59,7 @@
           class="library-feed__tags"
           hydrate-on-visible
           micro
+          hide-more
         />
 
         <p
@@ -86,22 +87,17 @@
         </p>
       </div>
 
-      <div class="library-feed__actions _from-sm">
-        <UiBtn
-          :theme="following ? 'secondary' : 'primary'"
-          class="library-feed__follow"
-          @click="emit('toggle-follow', item)"
-        >
-          <UiIcon
-            :name="following ? 'check' : 'plus'"
-            size="16"
-          />
-          {{ following ? t('library.following_state') : t('follow') }}
-        </UiBtn>
+      <div class="library-feed__actions">
+        <UiFollowBtn
+          :following="following"
+          :name="item.title"
+          @toggle="emit('toggle-follow', item)"
+        />
 
         <UiLink
           :to="item.to"
           theme="secondary"
+          class="_from-sm"
         >
           {{ videosText }}
           <UiIcon
@@ -112,10 +108,10 @@
       </div>
     </header>
 
-    <h3
+    <!-- <h3
       v-if="item.feedTitle"
       class="library-feed__feed-title"
-    >{{ item.feedTitle }}</h3>
+    >{{ item.feedTitle }}</h3> -->
 
     <div class="library-feed__grid">
       <CardVideo
@@ -128,7 +124,7 @@
       />
     </div>
 
-    <UiLink
+    <!-- <UiLink
       :to="item.to"
       theme="secondary"
       class="library-feed__all _to-sm"
@@ -139,7 +135,7 @@
         name="arrow-right"
         size="16"
       />
-    </UiLink>
+    </UiLink> -->
   </article>
 </template>
 
@@ -185,9 +181,6 @@ const ageText = computed(() => {
 
 <style lang="scss">
 .library-feed {
-  /* Растушёвка «ещё» у тегов уходит в фон карточки, а не страницы */
-  --expand-row-fade-end: #{$library-feed-fade};
-
   @include from-br(sm) {
     padding: 20px;
     border: 1px solid $library-feed-border;
@@ -198,23 +191,15 @@ const ageText = computed(() => {
 
 .library-feed__header {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr) auto;
   column-gap: 16px;
   row-gap: 12px;
   align-items: center;
   margin-bottom: 20px;
-
-  @include from-br(sm) {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
 }
 
 .library-feed__header.--without-avatar {
-  grid-template-columns: minmax(0, 1fr);
-
-  @include from-br(sm) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
+  grid-template-columns: minmax(0, 1fr) auto;
 }
 
 .library-feed__avatar {
@@ -344,17 +329,13 @@ const ageText = computed(() => {
   column-gap: 8px;
 }
 
-.library-feed__follow {
-  min-width: 124px;
-}
-
-.library-feed__feed-title {
-  @include font-sm;
+// .library-feed__feed-title {
+//   @include font-sm;
 
-  margin: 0 0 12px;
-  font-weight: 400;
-  color: $library-feed-title;
-}
+//   margin: 0 0 12px;
+//   font-weight: 400;
+//   color: $library-feed-title;
+// }
 
 .library-feed__grid {
   display: grid;

package/components/library/follows.vue

@@ -84,10 +84,21 @@ function isFollowing(item: ILibraryFeedItem) {
   return !unfollowed.value.includes(item.guid);
 }
 
+function follow(guid: string) {
+  unfollowed.value = unfollowed.value.filter(item => item !== guid);
+}
+
+function unfollow(guid: string) {
+  unfollowed.value = [...unfollowed.value, guid];
+}
+
+/** Заглушка: подписка живёт в локальном стейте, API ещё нет. Снекбар с undo рисует сама кнопка. */
 function onToggleFollow(item: ILibraryFeedItem) {
-  unfollowed.value = isFollowing(item)
-    ? [...unfollowed.value, item.guid]
-    : unfollowed.value.filter(guid => guid !== item.guid);
+  if (isFollowing(item)) {
+    unfollow(item.guid);
+  } else {
+    follow(item.guid);
+  }
 }
 </script>
 
@@ -106,6 +117,10 @@ function onToggleFollow(item: ILibraryFeedItem) {
 
 .library-follows__list {
   display: grid;
-  row-gap: 24px;
+  row-gap: 40px;
+
+  @include from-br(sm) {
+    row-gap: 24px;
+  }
 }
 </style>

package/components/player/interface.vue

@@ -6,49 +6,60 @@
         :video-md5="data.md5"
         :likes="data.likes"
         :dislikes="data.dislikes"
-      />
-      <PlayerInfo
-        :created="data.created"
-        :views="data.views"
-        class="_from-sm"
+        class="player-interface__like"
       />
       <div class="player-interface__wrapper">
-        <UiBtn
+        <button
+          :class="{'--favorite': isFavorite}"
+          :aria-pressed="isFavorite"
+          type="button"
           class="player-interface__button"
-          theme="muted"
-          size="s"
-          @click="onAddPlaylistClick"
+          @click="isFavorite = !isFavorite"
         >
           <UiIcon
-            name="crest-in-circle"
-            size="16"
+            :name="isFavorite ? 'heart' : 'heart-stroke'"
+            class="player-interface__button-icon"
+            size="24"
           />
-          <span class="_from-sm">{{ t('add_to') }}</span>
-        </UiBtn>
-        <UiBtn
+          <span class="player-interface__button-label _to-sm">{{ t('favorite') }}</span>
+          <span class="player-interface__button-label _from-sm">{{ isFavorite ? t('favorite_remove') : t('favorite') }}</span>
+        </button>
+        <button
+          type="button"
           class="player-interface__button"
-          theme="muted"
-          size="s"
-          @click="openReportPopup(videoCard)"
+          @click="onAddPlaylistClick"
         >
           <UiIcon
-            name="flag"
-            size="16"
+            class="player-interface__button-icon"
+            name="playlist"
+            size="24"
           />
-          <span class="_from-sm">{{ t('report') }}</span>
-        </UiBtn>
-        <UiBtn
+          <span class="player-interface__button-label">{{ t('playlist.playlist') }}</span>
+        </button>
+        <button
+          type="button"
           class="player-interface__button"
-          theme="muted"
-          size="s"
           @click="isShareOpen = true"
         >
           <UiIcon
+            class="player-interface__button-icon"
             name="share"
-            size="16"
+            size="24"
           />
-          <span class="_from-sm">{{ t('share') }}</span>
-        </UiBtn>
+          <span class="player-interface__button-label">{{ t('share') }}</span>
+        </button>
+        <button
+          type="button"
+          class="player-interface__button"
+          @click="openReportPopup(videoCard)"
+        >
+          <UiIcon
+            class="player-interface__button-icon"
+            name="flag"
+            size="24"
+          />
+          <span class="player-interface__button-label">{{ t('report') }}</span>
+        </button>
       </div>
     </div>
     <div
@@ -135,21 +146,13 @@ const { openReportPopup } = useReportPopup();
 
 const isShareOpen = ref(false);
 
-const resultLikes = ref(props.data.likes);
+const isFavorite = ref(false);
 
 const { isAuthorized } = useUser(AuthorizationApiService);
 
 function onAddPlaylistClick() {
   usePlaylistAdd().openPlaylistAdd(isAuthorized, props.data);
 }
-
-const isLiked = ref(false);
-
-onMounted(() => {
-  isLiked.value = !!localStorage.getItem(props.data.guid);
-  resultLikes.value = localStorage.getItem(props.data.guid) ? resultLikes.value += 1 : resultLikes.value;
-});
-
 </script>
 
 <style lang="scss">
@@ -158,40 +161,111 @@ onMounted(() => {
   gap: 12px;
 }
 
+/* На мобиле лайк/дизлайк и кнопки действий — единый ряд из шести равных ячеек «иконка над
+   подписью»: обе обёртки становятся `display: contents`, чтобы их кнопки легли прямо в грид
+   заголовка. От sm возвращается десктопная раскладка — лайк-блок слева, пилюли справа. */
 .player-interface__header {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 4px;
+  padding-block: 12px;
+  border-bottom: 1px solid $video-interface-mobile-border;
+
+  @include from-br(sm) {
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    justify-content: space-between;
+    padding-block: 0;
+    border-bottom: none;
+  }
+}
 
-  @include to-br(sm) {
-    overflow: auto;
-    scrollbar-width: none;
+.player-like.player-interface__like {
+  display: contents;
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
+  @include from-br(sm) {
+    display: flex;
   }
 }
 
 .player-interface__wrapper {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
+  display: contents;
+
+  @include from-br(sm) {
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+  }
 }
 
+/* Нативный `<button>`, а не `<UiBtn>`: на мобиле у кнопки нет ни подложки, ни паддингов
+   пилюли, а перебить геометрию `.ui-btn.--s` из компонента-потребителя можно только
+   гонкой специфичности. Тему кнопка всё равно спрашивает через `button-variant()`. */
 .player-interface__button {
-  @include font-sm;
-  @include button-variant(interface-button);
+  @include font-xs;
 
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  column-gap: 6px;
-  padding: 6px 12px;
-  background-color: $video-interface-button-bg;
+  display: grid;
+  justify-items: center;
+  row-gap: 6px;
+  padding-block: 4px;
   border-radius: $radius-lg;
-  color: $video-interface-button-text;
+  color: $video-interface-mobile-icon;
+  cursor: pointer;
+  transition: var(--transition) opacity;
+
+  @include from-br(sm) {
+    @include font-sm;
+    @include button-variant(interface-button);
+
+    grid-auto-flow: column;
+    align-items: center;
+    row-gap: 0;
+    column-gap: 6px;
+    padding: 6px 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    background-color: var(--button-bg, #{$video-interface-button-bg});
+    color: var(--button-text, #{$video-interface-button-text});
+  }
+
+  @include hover(background-color, color, opacity) {
+    background-color: var(--button-bg--hover, #{$video-interface-button-bg--hover});
+    color: var(--button-text--hover, #{$video-interface-button-text--hover});
+  }
+}
+
+.player-interface__button:active {
+  opacity: 0.7;
+}
+
+.player-interface__button.--favorite {
+  @include from-br(sm) {
+    background-color: $video-interface-button-bg--active;
+    color: $video-interface-button-text--active;
+  }
+}
+
+.player-interface__button-icon {
+  $size: 24px;
+
+  width: $size;
+  height: $size;
+
+  @include from-br(sm) {
+    $size: 16px;
+
+    width: $size;
+    height: $size;
+  }
+}
+
+.player-interface__button-label {
+  color: $video-interface-mobile-label;
+
+  @include from-br(sm) {
+    color: inherit;
+  }
 }
 
 .player-interface__description {

package/components/player/like.vue

@@ -6,19 +6,18 @@
   >
     <button
       :class="{'--active': isLiked}"
+      :aria-pressed="isLiked"
       :title="t('like')"
       class="player-like__control"
       type="button"
       @click="onReactionClick('like')"
     >
-      <span class="player-like__control-icon-wrapper">
-        <UiIcon
-          class="player-like__control-icon --like"
-          name="thumbs-up"
-          size="16"
-        />
-      </span>
-      <span class="player-like__control-text">{{ $n(Number(resultLikes), 'compact') }}</span>
+      <UiIcon
+        :name="isLiked ? 'thumbs-up-filled' : 'thumbs-up'"
+        class="player-like__control-icon"
+        size="24"
+      />
+      <span class="player-like__count">{{ $n(Number(resultLikes), 'compact') }}</span>
     </button>
     <div
       v-if="bar"
@@ -28,26 +27,21 @@
         :style="{ width: likePercent + '%' }"
         class="player-like__bar-likes"
       />
-      <div
-        :style="{ width: dislikePercent + '%' }"
-        class="player-like__bar-dislikes"
-      />
     </div>
     <button
       :class="{'--active': isDisliked}"
+      :aria-pressed="isDisliked"
       :title="t('dislike')"
       class="player-like__control"
       type="button"
       @click="onReactionClick('dislike')"
     >
-      <span class="player-like__control-icon-wrapper">
-        <UiIcon
-          class="player-like__control-icon --dislike"
-          name="thumbs-down"
-          size="16"
-        />
-      </span>
-      <span class="player-like__control-text">{{ $n(Math.abs(Number(resultDislikes)), 'compact') }}</span>
+      <UiIcon
+        :name="isDisliked ? 'thumbs-down-filled' : 'thumbs-down'"
+        class="player-like__control-icon"
+        size="24"
+      />
+      <span class="player-like__count">{{ $n(Math.abs(Number(resultDislikes)), 'compact') }}</span>
     </button>
   </div>
 </template>
@@ -126,9 +120,7 @@ async function onReactionClick(type: 'like' | 'dislike') {
   }
 }
 
-const percents = computed(() => getReactionPercents(resultLikes.value, resultDislikes.value));
-const likePercent = computed(() => percents.value.likePercent);
-const dislikePercent = computed(() => percents.value.dislikePercent);
+const likePercent = computed(() => getReactionPercents(resultLikes.value, resultDislikes.value).likePercent);
 </script>
 
 <style lang="scss">
@@ -142,22 +134,59 @@ const dislikePercent = computed(() => percents.value.dislikePercent);
   column-gap: 4px;
 }
 
-.--mini .player-like__control {
-  @include font-xs;
+/* На мобиле контрол — вертикальная ячейка «иконка над числом», как в остальном мобильном
+   ряду действий; от sm возвращается в строку с числом сбоку. */
+.player-like__control {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 6px;
+  padding-block: 4px;
+  color: $like-mobile-icon;
+  cursor: pointer;
+  transition: var(--transition) color, var(--transition) opacity;
+
+  @include from-br(sm) {
+    flex-direction: row;
+    row-gap: 0;
+    column-gap: 6px;
+    padding: 6px;
+    border-radius: $radius-small;
+    color: $like-icon;
+  }
+
+  @include hover(color, opacity) {
+    color: $like-icon--hover;
+  }
 }
 
-.player-like__control {
-  @include font-sm;
+.player-like__control:active {
+  opacity: 0.7;
+}
 
-  color: $like-text;
-  display: flex;
+.player-like__control.--active {
+  color: $like-icon--active;
+}
+
+.player-like.--mini .player-like__control {
+  flex-direction: row;
   column-gap: 4px;
-  align-items: center;
+  padding: 0;
+
+  /* Только до sm: от sm цвет и так берётся из базового правила, а трёхклассовый
+     селектор перебивал бы им ховер. */
+  @include to-br(sm) {
+    color: $like-icon;
+  }
 }
 
 .player-like__control-icon {
-  color: $like-icon;
-  transition: var(--transition) color;
+  @include from-br(sm) {
+    $size: 16px;
+
+    width: $size;
+    height: $size;
+  }
 }
 
 .--mini .player-like__control-icon {
@@ -167,50 +196,43 @@ const dislikePercent = computed(() => percents.value.dislikePercent);
   height: $size;
 }
 
-.--mini .player-like__bar {
-  width: 36px;
-}
+.player-like__count {
+  @include font-xs;
 
-.--mini .player-like__control-text {
-  min-width: auto;
-}
+  color: $like-mobile-count;
 
-.player-like__control:is(:hover, :focus-visible) {
-  @media (hover: hover) {
-    color: $like-text--hover;
+  @include from-br(sm) {
+    color: $like-count;
   }
 }
 
-.player-like__control.--active .player-like__control-icon.--like {
-  color: $like-icon--active;
-}
-
-.player-like__control.--active .player-like__control-icon.--dislike {
-  color: $like-icon-dislike--active;
+.--mini .player-like__count {
+  color: $like-count;
 }
 
 .player-like__bar {
-  display: flex;
+  display: none;
+  width: 64px;
   height: 6px;
+  margin-inline: 4px;
   border-radius: $radius-full;
   overflow: hidden;
   background-color: $like-bar-bg;
-  width: 40px;
-}
 
-.player-like__bar-likes {
-  background-color: $like-bar-likes;
+  @include from-br(sm) {
+    display: flex;
+    width: 48px;
+    height: 4px;
+  }
 }
 
-.player-like__bar-dislikes {
-  background-color: transparent;
+.--mini .player-like__bar {
+  display: flex;
+  width: 36px;
 }
 
-.player-like__control-text {
-  min-width: 2ch;
-  max-width: 7ch;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+.player-like__bar-likes {
+  background-color: $like-bar-likes;
+  border-radius: $radius-full;
 }
 </style>

package/components/playlist/add.vue

@@ -261,7 +261,7 @@ const postVideoForm = computed(() => ({
   duration: videoCard.value?.duration ?? 0,
 }));
 
-const { setErrorState, showSuccess, showError } = useSnackbar();
+const { setErrorState, show, showError } = useSnackbar();
 
 async function onSaveClick() {
   let newPlaylist: IPlaylistShort | undefined;
@@ -293,7 +293,7 @@ async function onSaveClick() {
       newPlaylist,
     });
     closePopup();
-    showSuccess('video_added');
+    show('video_added');
   } catch (error) {
     setErrorState(error);
     console.log(error, 'error add video to playlist');

package/components/playlist/delete-video.vue

@@ -47,7 +47,7 @@
 import { PlaylistStep } from '../../runtime';
 
 const { isPlaylistEditOpen, closePlaylistEdit, currentStep, selectedPlaylist, deletedVideo } = usePlaylistEdit();
-const { showSuccess } = useSnackbar();
+const { show } = useSnackbar();
 
 const props = defineProps<{
   loadingDeleteVideo: boolean
@@ -71,7 +71,7 @@ async function onBinClick() {
       playlistId: playlistId.value,
       deletedVideoId: deletedVideo.value?.id || ''
     });
-    showSuccess('video_removed');
+    show('video_removed');
     closePlaylistEdit();
   } catch {
     console.log('error delete');

package/components/playlist/edit.vue

@@ -147,7 +147,7 @@ const inputValue = ref('');
 const toggleValue = ref(false);
 
 const { isPlaylistEditOpen, closePlaylistEdit, currentStep, selectedPlaylist, openPlaylistEdit } = usePlaylistEdit();
-const { showSuccess } = useSnackbar();
+const { show } = useSnackbar();
 
 const route = useRoute();
 const id = computed(() => route.params[ 'playlistId' ] ? String(route.params[ 'playlistId' ]) : selectedPlaylist.value?.id);
@@ -168,7 +168,7 @@ const playlistsData = useState<IPlaylistData>(`data-${AsyncData.PlaylistById}-${
 async function onDeleteClick() {
   try {
     emit('delete-playlist', id.value || '');
-    showSuccess('playlist_deleted');
+    show('playlist_deleted');
     closePlaylistEdit();
   } catch {
     console.log('error delete');
@@ -190,7 +190,7 @@ async function onSaveClick() {
       playlistsData.value.playlistType = playlistType;
     }
     closePlaylistEdit();
-    showSuccess('changes_soon');
+    show('changes_soon');
   } catch {
     console.log('error save');
   }