itube-specs 0.0.902 → 0.0.904

package/assets/icons/common/flag.svg

@@ -1 +1 @@
-<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zm0 7v-7"/></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"></path></svg>

package/assets/icons/common/heart-stroke.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart w-5 h-5" aria-hidden="true"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>

package/assets/icons/common/heart.svg

@@ -1 +1 @@
-<svg fill="currentColor" viewBox="0 0 24 24"><path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"/></svg>
+<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>

package/assets/icons/common/playlist.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12H3"></path><path d="M16 6H3"></path><path d="M12 18H3"></path><path d="m16 12 5 3-5 3v-6Z"></path></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"></path><path d="M10 12H3"></path><path d="M10 19H3"></path><path d="M15 12.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997a1 1 0 0 1-1.517-.86z"></path></svg>

package/assets/icons/common/share.svg

@@ -1 +1 @@
-<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98m-.01-10.98-6.82 3.98"/></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg>

package/assets/icons/common/thumbs-down-filled.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"></path><path d="M17 14V2"></path></svg>

package/assets/icons/common/thumbs-down.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88M17 14V2"/></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"></path><path d="M17 14V2"></path></svg>

package/assets/icons/common/thumbs-up-filled.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path><path d="M7 10v12"></path></svg>

package/assets/icons/common/thumbs-up.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88M7 10v12"/></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path><path d="M7 10v12"></path></svg>

package/assets/scss/themes/dark/_theme.scss

@@ -230,6 +230,13 @@ $video-info-description-text: $color-zinc-400;
 // ─── Video interface ───
 $video-interface-button-bg: $color-zinc-800;
 $video-interface-button-text: $color-zinc-400;
+$video-interface-button-bg--hover: $color-zinc-700;
+$video-interface-button-text--hover: $color-white;
+$video-interface-button-bg--active: $color-zinc-700;
+$video-interface-button-text--active: $color-white;
+$video-interface-mobile-icon: $color-white;
+$video-interface-mobile-label: $color-zinc-300;
+$video-interface-mobile-border: $color-zinc-800;
 
 // ─── Video channel ───
 $video-channel-bg: $color-zinc-800-60;
@@ -283,11 +290,12 @@ $video-playlist-header-button-text--active: $color-indigo-400;
 $video-playlist-header-button-bg--active: $color-indigo-500-10;
 
 // ─── Like ───
-$like-text: $color-zinc-400;
 $like-icon: $color-zinc-400;
-$like-text--hover: $color-white;
-$like-icon--active: $color-green-500;
-$like-icon-dislike--active: $color-red-500;
+$like-icon--hover: $color-white;
+$like-icon--active: $color-white;
+$like-count: $color-zinc-500;
+$like-mobile-icon: $color-white;
+$like-mobile-count: $color-zinc-300;
 $like-bar-bg: $color-zinc-700;
 $like-bar-likes: $color-zinc-500;
 

package/assets/scss/themes/light/_theme.scss

@@ -287,6 +287,13 @@ $video-info-description-text: $color-gray-700;
 // ─── Video interface ───
 $video-interface-button-bg: $color-slate-750;
 $video-interface-button-text: $color-gray-400;
+$video-interface-button-bg--hover: $color-slate-700;
+$video-interface-button-text--hover: $color-white;
+$video-interface-button-bg--active: $color-slate-700;
+$video-interface-button-text--active: $color-white;
+$video-interface-mobile-icon: $color-gray-900;
+$video-interface-mobile-label: $color-gray-500;
+$video-interface-mobile-border: $color-gray-200;
 
 // ─── Video channel ───
 $video-channel-bg: $color-gray-200;
@@ -340,11 +347,12 @@ $video-playlist-header-button-text--active: $color-indigo-soft;
 $video-playlist-header-button-bg--active: $color-indigo-500-10;
 
 // ─── Like ───
-$like-text: $color-gray-400;
 $like-icon: $color-gray-500;
-$like-text--hover: $color-gray-900;
-$like-icon--active: $color-green-500;
-$like-icon-dislike--active: $color-red-500;
+$like-icon--hover: $color-gray-900;
+$like-icon--active: $color-gray-900;
+$like-count: $color-gray-400;
+$like-mobile-icon: $color-gray-900;
+$like-mobile-count: $color-gray-500;
 $like-bar-bg: $color-slate-700;
 $like-bar-likes: $color-gray-500;
 

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

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

package/assets/icons/common/crest-in-circle.svg

@@ -1 +0,0 @@
-<svg fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v8m-4-4h8"/></svg>