itube-specs 0.0.321 → 0.0.323

package/components/cards/s-video-mini-card.vue

@@ -9,10 +9,11 @@
     <SImg
         class="s-video-mini-card__img"
         sizes="96px"
-        :src="card.thumbUrl"
+        :src="currentPoster"
         width="96"
         height="64"
         :alt="card.title"
+        @error="onPosterError"
     />
     <SLabel
         class="s-video-mini-card__duration"
@@ -34,6 +35,8 @@ const props = defineProps<{
   prefix?: string
 }>()
 
+const posterError = ref(false)
+
 const duration = computed(() => {
   return getDuration(props.card.duration)
 })
@@ -46,4 +49,15 @@ const component = computed(() => {
 })
 
 const { generateLink } = useGenerateLink();
+
+const posterPlaceholder = '/img/placeholder.webp'
+
+const currentPoster = computed(() => {
+  if (posterError.value) return posterPlaceholder
+  return props.card.thumbUrl || posterPlaceholder
+})
+
+function onPosterError() {
+  posterError.value = true
+}
 </script>

package/composables/use-fetch-channels-by-model.ts

@@ -0,0 +1,36 @@
+import { useRoute } from 'vue-router';
+import { EAsyncData, ELanguage } from '../runtime';
+import type { IChannelCard, PaginatedResponse } from '../types';
+
+export const useFetchChannelsByModel = (
+    apiMethod: (...args: any[]) => Promise<PaginatedResponse<IChannelCard>>
+) => {
+  const lang = useI18n().locale.value as ELanguage;
+    const route = useRoute();
+    const slug = useSlug();
+    const key = EAsyncData.ChannelsByModel;
+    const stateKey = computed(() => `data-${key}-${slug.value}-${lang}`);
+
+    const { data, status, error } = useAsyncData<PaginatedResponse<IChannelCard>>(
+        key,
+        () => useApiFetcher<PaginatedResponse<IChannelCard>>(
+            stateKey.value,
+            apiMethod,
+            lang,
+            {
+                page: 1,
+            },
+            slug.value,
+        )(),
+        {
+            watch: [
+                () => {
+                    const currentQuery = route.query;
+                    return JSON.stringify(currentQuery);
+                },
+            ],
+        }
+    );
+
+    return { data, status, error };
+};

package/composables/use-fetch-popular-tags-by-model-name.ts

@@ -0,0 +1,23 @@
+import { EAsyncData, ELanguage } from '../runtime';
+import type { IPopularTagsModel } from '../types';
+
+export const useFetchPopularTagsByModelName = (
+  apiMethod: (...args: any[]) => Promise<IPopularTagsModel[]>
+) => {
+  const lang = useI18n().locale.value as ELanguage;
+  const slug = useSlug();
+  const key = EAsyncData.PopularTagsByModel;
+  const stateKey = computed(() => `data-${key}-${slug.value}-${lang}`);
+
+  const { data, status, error } = useAsyncData<IPopularTagsModel[]>(
+    key,
+    () => useApiFetcher<IPopularTagsModel[]>(
+        stateKey.value,
+        apiMethod,
+        lang,
+        slug.value,
+    )()
+  );
+
+  return { data, status, error };
+};

package/composables/use-fetch-videos-by-model-and-channel.ts

@@ -0,0 +1,48 @@
+import { convertString, EAsyncData, ELanguage, getSelectedQuery } from '../runtime';
+import type { IVideoCard, PaginatedResponse } from '../types';
+import { selectAddedItems, selectDurationItems, sortItemsDefault } from '../lib';
+import { useRoute } from 'vue-router';
+
+export const useFetchVideosByModelAndChannel = async (apiMethod: (...args: any[]) => Promise<PaginatedResponse<IVideoCard>>) => {
+    const route = useRoute();
+    const { locale } = useI18n();
+    const lang = locale.value as ELanguage;
+    const slug = useSlug();
+    const channel = computed(() => {
+        const tagRaw = route.params['channel'];
+        const slug = convertString().fromSlug(String(tagRaw));
+        return Array.isArray(slug) ? slug[ 0 ] : slug;
+    });
+    const filters = computed(() => useGetVideosFilterRequest(route, selectDurationItems, selectAddedItems));
+    const key = EAsyncData.VideosByModelAndChannel;
+    const stateKey = computed(() => `data-${key}-${slug.value}-${channel.value}-${JSON.stringify(route.query)}-${lang}`);
+
+    const { data, status, error } = await useAsyncData<PaginatedResponse<IVideoCard>>(
+        key,
+        () => useApiFetcher<PaginatedResponse<IVideoCard>>(
+            stateKey.value,
+            apiMethod,
+            {
+                page: Number(route.query[ 'page' ]) || 1,
+                'per-page': 48,
+            },
+            filters.value,
+            slug.value,
+            channel.value,
+            lang,
+            getSelectedQuery(route, sortItemsDefault) || '-popularity'
+        )(),
+        {
+            watch: [
+                () => {
+                    if (route.query) {
+                        const currentQuery = route.query;
+                        return JSON.stringify(currentQuery);
+                    }
+                },
+            ],
+        }
+    );
+
+    return { data, status, error };
+};

package/composables/use-fetch-videos-by-model-and-tag.ts

@@ -0,0 +1,48 @@
+import { convertString, EAsyncData, ELanguage, getSelectedQuery } from '../runtime';
+import type { IVideoCard, PaginatedResponse } from '../types';
+import { selectAddedItems, selectDurationItems, sortItemsDefault } from '../lib';
+import { useRoute } from 'vue-router';
+
+export const useFetchVideosByModelAndTag = async (apiMethod: (...args: any[]) => Promise<PaginatedResponse<IVideoCard>>) => {
+    const route = useRoute();
+    const { locale } = useI18n();
+    const lang = locale.value as ELanguage;
+    const slug = useSlug();
+    const tag = computed(() => {
+        const tagRaw = route.params['tag'];
+        const slug = convertString().fromSlug(String(tagRaw));
+        return Array.isArray(slug) ? slug[ 0 ] : slug;
+    });
+    const filters = computed(() => useGetVideosFilterRequest(route, selectDurationItems, selectAddedItems));
+    const key = EAsyncData.VideosByModelAndTag;
+    const stateKey = computed(() => `data-${key}-${slug.value}-${tag.value}-${JSON.stringify(route.query)}-${lang}`);
+
+    const { data, status, error } = await useAsyncData<PaginatedResponse<IVideoCard>>(
+        key,
+        () => useApiFetcher<PaginatedResponse<IVideoCard>>(
+            stateKey.value,
+            apiMethod,
+            {
+                page: Number(route.query[ 'page' ]) || 1,
+                'per-page': 48,
+            },
+            filters.value,
+            slug.value,
+            tag.value,
+            lang,
+            getSelectedQuery(route, sortItemsDefault) || '-popularity'
+        )(),
+        {
+            watch: [
+                () => {
+                    if (route.query) {
+                        const currentQuery = route.query;
+                        return JSON.stringify(currentQuery);
+                    }
+                },
+            ],
+        }
+    );
+
+    return { data, status, error };
+};

package/package.json

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

package/runtime/enums/async-data.ts

@@ -49,4 +49,6 @@ export enum EAsyncData {
     SetPlaylistView = 'set-playlist-view',
     PopularTagsByModel = 'popular-tags-by-model',
     ChannelsByModel = 'channels-by-model',
+    VideosByModelAndChannel = 'videos-by-model-and-channel',
+    VideosByModelAndTag = 'videos-by-model-and-tag',
 }