itube-specs 0.0.846 → 0.0.848

package/components/card/video/index.vue

@@ -56,7 +56,7 @@
       <component
         v-if="!mini"
         :is="component"
-        :to="card.channelName ? localePath(`/channels/${convertString().toSlug(card.channelName)}`) : undefined"
+        :to="channelLink"
         class="card-video__logo-wrapper"
       >
         <UiImg
@@ -84,7 +84,7 @@
       <component
         v-if="!mini && card.channelName"
         :is="component"
-        :to="card.channelName ? localePath(`/channels/${convertString().toSlug(card.channelName)}`) : undefined"
+        :to="channelLink"
         class="card-video__channel-wrapper"
       >
         <span
@@ -158,7 +158,7 @@ const NuxtLinkComponent = resolveComponent('NuxtLink');
 
 const component = computed(() => props.card.channelName ? NuxtLinkComponent : 'div');
 
-const localePath = useLocalePath();
+const { generateLink } = useGenerateLink();
 
 const pageName = useGetPureRouteName();
 const isChannelPage = computed(() => pageName === 'channels-channel');
@@ -203,7 +203,11 @@ const duration = computed(() => {
 
 const rootPath = computed(() => props.playlistId ? `playlists/${props.playlistId}` : 'videos');
 
-const link = computed(() => localePath(`/${rootPath.value}/${props.card[ featureFlags.FetchByUrlEnabled ? 'url' : 'id' ]}`));
+const link = computed(() => generateLink(`/${rootPath.value}/${props.card[ featureFlags.FetchByUrlEnabled ? 'url' : 'id' ]}`));
+
+const channelLink = computed(() => props.card.channelName
+  ? generateLink(`/channels/${convertString().toSlug(props.card.channelName)}`)
+  : undefined);
 
 const slug = useSlug();
 

package/components/info/grid.vue

@@ -161,6 +161,16 @@ function isWarning(value: string) {
 .info-grid__item.--link .info-grid__item-value {
   background-color: $info-grid-item-value-bg--link;
   color: $info-grid-item-value--link;
+
+  @include from-br(sm) {
+    transition: var(--transition) background-color;
+  }
+}
+
+.info-grid__item.--link:is(:hover, :focus-visible) .info-grid__item-value {
+  @include from-br(sm) {
+    background-color: $info-grid-item-value-link-bg--hover;
+  }
 }
 
 .info-grid__item:not(.--link) .info-grid__item-value {

package/components/player/channel.vue

@@ -50,12 +50,13 @@ const props = defineProps<{
 }>();
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
+const { generateLink } = useGenerateLink();
 
 const emit = defineEmits<{
   (eventName: 'subscribe'): void
 }>();
 
-const link = computed(() => `/channels/${convertString().toSlug(props.name)}`);
+const link = computed(() => generateLink(`/channels/${convertString().toSlug(props.name)}`));
 
 const initials = computed(() => getNameInitials(props.name));
 

package/components/player/follow.vue

@@ -40,6 +40,7 @@ const props = defineProps<{
 }>();
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
+const { generateLink } = useGenerateLink();
 
 const emit = defineEmits<{
   (eventName: 'click'): void
@@ -55,7 +56,7 @@ function onButtonClick() {
   }
 }
 
-const link = computed(() => `/channels/${convertString().toSlug(props.card.name)}`);
+const link = computed(() => generateLink(`/channels/${convertString().toSlug(props.card.name)}`));
 </script>
 
 <style lang="scss">

package/components/player/interface.vue

@@ -14,6 +14,7 @@
       />
       <div class="player-interface__wrapper">
         <UiBtn
+          class="player-interface__button"
           theme="muted"
           size="s"
           @click="onAddPlaylistClick"
@@ -190,11 +191,6 @@ onMounted(() => {
   background-color: $video-interface-button-bg;
   border-radius: $radius-lg;
   color: $video-interface-button-text;
-
-  @include hover(color, background-color) {
-    background-color: $video-interface-button-bg--hover;
-    color: $video-interface-button-text--hover;
-  }
 }
 
 .player-interface__description {

package/package.json

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