🐛 Replace comments API (#2772)

CHANGELOG.md

@@ -3,6 +3,13 @@
 This file is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.15.4]
+
+### Fixed
+
+- Replace comments API [#2772](https://github.com/ViewTube/viewtube/pull/2772)
+- Perform search when clicking on autocomplete suggestion (Thanks @frozenduck) [#2770](https://github.com/ViewTube/viewtube/pull/2770)
+
 ## [0.15.3]
 
 ### Added
@@ -420,7 +427,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Initial release
 
-[unreleased]: https://github.com/viewtube/viewtube/compare/v0.15.3...development
+[unreleased]: https://github.com/viewtube/viewtube/compare/v0.15.4...development
+[0.15.4]: https://github.com/viewtube/viewtube/compare/v0.15.3...v0.15.4
 [0.15.3]: https://github.com/viewtube/viewtube/compare/v0.15.2...v0.15.3
 [0.15.2]: https://github.com/viewtube/viewtube/compare/v0.15.1...v0.15.2
 [0.15.1]: https://github.com/viewtube/viewtube/compare/v0.15.0...v0.15.1

client/components/Comment.vue

@@ -3,7 +3,7 @@ import BadgeButton from '@/components/buttons/BadgeButton.vue';
 import { useMessagesStore } from '@/store/messages';
 
 const props = defineProps<{
-  comment: ApiDto<'CommentDto'>;
+  comment: ApiDto<'VTCommentDto'>;
   channelAuthorName?: string;
   channelAuthorId?: string;
 }>();
@@ -12,7 +12,6 @@ const emit = defineEmits<{
   (e: 'setTimestamp', timestamp: number): void;
 }>();
 
-const route = useRoute();
 const messagesStore = useMessagesStore();
 const imgProxy = useImgProxy();
 const { createTextLinks } = useCreateTextLinks(seconds => {
@@ -31,12 +30,11 @@ const hideReplies = () => {
 
 const loadReplies = () => {
   loadingReplies.value = true;
-  const replyToken = props.comment.replyToken;
-  const videoId = route.query.v;
-  getCommentReplies(videoId, replyToken)
+  const replyContinuation = props.comment.replyContinuation;
+  getCommentReplies(replyContinuation)
     .then(response => {
       replies.value = response.comments;
-      repliesContinuationString.value = response.continuation;
+      repliesContinuationString.value = response.continuation ?? null;
       repliesLoaded.value = true;
       loadingReplies.value = false;
     })
@@ -51,8 +49,7 @@ const loadReplies = () => {
 };
 const loadMoreReplies = () => {
   repliesContinuationLoading.value = true;
-  const videoId = route.query.v;
-  getCommentReplies(videoId, repliesContinuationString.value)
+  getCommentReplies(repliesContinuationString.value)
     .then(response => {
       replies.value = replies.value.concat(response.comments);
       repliesContinuationString.value = response.continuation ?? null;
@@ -70,26 +67,26 @@ const loadMoreReplies = () => {
 
 <template>
   <div class="comment" :class="{ open: repliesLoaded }">
-    <nuxt-link :to="{ path: '/channel/' + comment.authorId }" class="comment-author-image-link">
+    <nuxt-link :to="{ path: '/channel/' + comment.author?.id }" class="comment-author-image-link">
       <img
         class="comment-author-image"
-        :src="imgProxy.url + comment.authorThumbnails[2].url"
-        :alt="comment.author"
+        :src="imgProxy.url + comment.author?.thumbnails?.[0].url"
+        :alt="`${comment.author?.name} profile picture`"
       />
     </nuxt-link>
     <div class="comment-container">
       <nuxt-link
-        v-tippy="comment.author"
+        v-tippy="comment.author?.name"
         class="comment-author"
-        :to="{ path: '/channel/' + comment.authorId }"
-        :class="{ owner: comment.authorId === channelAuthorId }"
+        :to="{ path: '/channel/' + comment.author?.id }"
+        :class="{ owner: comment.channelOwner }"
       >
-        <p class="comment-author-text">{{ comment.author }}</p>
+        <p class="comment-author-text">{{ comment.author?.name }}</p>
       </nuxt-link>
       <div class="comment-content links" v-html="createTextLinks(comment.content)" />
       <div class="comment-properties">
         <div class="published comment-property">
-          <span>{{ comment.publishedText }}</span>
+          <span>{{ comment.published?.text }}</span>
         </div>
 
         <div class="likes comment-property">
@@ -108,7 +105,7 @@ const loadMoreReplies = () => {
           <span class="edited-text">edited</span>
         </div>
       </div>
-      <div v-if="comment.replyToken" class="comment-replies">
+      <div v-if="comment.hasReplies" class="comment-replies">
         <BadgeButton
           v-if="!repliesLoaded"
           class="comment-reply-count"

client/components/popup/SubscriptionIO.vue

@@ -61,7 +61,6 @@ const onImportFileChange = async (e: any) => {
   const extension = file.name.split('.').pop();
 
   const subscriptions = await getSubscriptionsToImport(file, extension);
-  debugger;
   if (subscriptions?.length > 0) {
     subscriptionsToImport.value = subscriptions;
     page2.value = true;

client/package.json

@@ -15,19 +15,19 @@
     "build:metadata": "node ./buildMetadata.mjs"
   },
   "devDependencies": {
-    "@iconify-json/mdi": "1.1.65",
-    "@nuxt/eslint-config": "0.2.0",
+    "@iconify-json/mdi": "1.1.66",
+    "@nuxt/eslint-config": "0.3.6",
     "@pinia-plugin-persistedstate/nuxt": "1.2.0",
     "@pinia/nuxt": "0.5.1",
     "@types/humanize-duration": "3.27.4",
-    "@types/node": "20.11.30",
+    "@types/node": "20.12.7",
     "@types/papaparse": "5.3.14",
     "@types/qrcode": "1.5.5",
     "@types/ua-parser-js": "0.7.39",
-    "@typescript-eslint/eslint-plugin": "7.3.1",
-    "@typescript-eslint/parser": "7.3.1",
-    "@unocss/nuxt": "0.58.9",
-    "@unocss/preset-icons": "0.58.9",
+    "@typescript-eslint/eslint-plugin": "7.6.0",
+    "@typescript-eslint/parser": "7.6.0",
+    "@unocss/nuxt": "0.59.2",
+    "@unocss/preset-icons": "0.59.2",
     "@vueuse/core": "10.9.0",
     "@vueuse/nuxt": "10.9.0",
     "consola": "3.2.3",
@@ -38,22 +38,22 @@
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-nuxt": "4.0.0",
-    "eslint-plugin-vue": "9.24.0",
-    "hls.js": "1.5.7",
+    "eslint-plugin-vue": "9.25.0",
+    "hls.js": "1.5.8",
     "human-number": "2.0.4",
     "humanize-duration": "3.32.0",
     "js-sha256": "0.11.0",
     "keen-slider": "6.8.6",
     "modern-js-ripple": "1.1.3",
     "nuxi": "3.11.1",
-    "nuxt": "3.11.1",
+    "nuxt": "3.11.2",
     "papaparse": "5.4.1",
     "pinia": "2.1.7",
     "qrcode": "1.5.3",
-    "sass": "1.72.0",
-    "swiper": "11.0.7",
+    "sass": "1.75.0",
+    "swiper": "11.1.1",
     "tippy.js": "6.3.7",
-    "typescript": "5.4.3",
+    "typescript": "5.4.5",
     "ua-parser-js": "1.0.37",
     "vue": "3.4.21",
     "vue-datepicker-next": "1.0.3",

client/utils/api/comments.ts

@@ -1,21 +1,21 @@
 export const getComments = (id: string | string[]) => {
   const { apiUrl } = useApiUrl();
 
-  return vtClientFetch<ApiDto<'CommentsResponseDto'>>(`${apiUrl.value}comments/${id}`);
+  return vtClientFetch<ApiDto<'VTCommentsResponseDto'>>(`${apiUrl.value}comments/${id}`);
 };
 
 export const getCommentsContinuation = (id: string | string[], continuation: string) => {
   const { apiUrl } = useApiUrl();
 
-  return vtClientFetch<ApiDto<'CommentsResponseDto'>>(
+  return vtClientFetch<ApiDto<'VTCommentsResponseDto'>>(
     `${apiUrl.value}comments/${id}?continuation=${continuation}`
   );
 };
 
-export const getCommentReplies = (id: string | string[], replyToken: string) => {
+export const getCommentReplies = (replyContinuation: string) => {
   const { apiUrl } = useApiUrl();
 
-  return vtClientFetch<ApiDto<'CommentsResponseDto'>>(
-    `${apiUrl.value}comments/${id}/replies?replyToken=${replyToken}`
+  return vtClientFetch<ApiDto<'VTCommentsReplyResponseDto'>>(
+    `${apiUrl.value}comments/replies?replyContinuation=${replyContinuation}`
   );
 };

client/utils/videoplayer/helpers/index.ts

@@ -809,7 +809,9 @@ export const videoPlayerSetup = (
   const onRefreshRecommendedQuality = (quality: number) => {
     if (dashHelper.value && dashHelper.value.isFullyInitialized) {
       const maxBitrate = dashHelper.value.getVideoQualityList()[quality];
-      dashHelper.value.setMaxBitrate(maxBitrate.bitrate);
+      if (maxBitrate) {
+        dashHelper.value.setMaxBitrate(maxBitrate.bitrate);
+      }
     }
   };
 
@@ -958,7 +960,6 @@ export const videoPlayerSetup = (
         }
       } else if (settingsStore.dashPlaybackEnabled && window.MediaSource) {
         // Using dashjs
-
         let videoPlaybackProxy = `${window.location.origin}/api`;
         if (
           typeof config.public.videoplaybackProxy === 'string' &&

package.json

@@ -4,7 +4,7 @@
   "author": "moisout",
   "country": "Switzerland",
   "email": "[email protected]",
-  "version": "0.15.3",
+  "version": "0.15.4",
   "license": "AGPLv3",
   "engines": {
     "node": ">=20.11.0",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "cross-env": "7.0.3",
     "prettier": "3.2.5",
-    "typescript": "5.4.3"
+    "typescript": "5.4.5"
   },
   "pnpm": {
     "patchedDependencies": {