✨ Report video loading error

client/app/components/message/MessageBoxContainer.vue

@@ -7,11 +7,13 @@ const messagesStore = useMessagesStore();
 
 <template>
   <div class="messages-container">
-    <MessageBox
-      v-for="message in messagesStore.visibleMessages"
-      :key="message.id"
-      :message="message"
-    />
+    <ClientOnly>
+      <MessageBox
+        v-for="message in messagesStore.visibleMessages"
+        :key="message.id"
+        :message="message"
+      />
+    </ClientOnly>
   </div>
 </template>
 

client/app/composables/videoplayer/mediaSession.ts

@@ -23,8 +23,8 @@ export const useMediaSession = ({
   if (navigator && 'mediaSession' in navigator) {
     navigator.mediaSession.metadata = new MediaMetadata({
       title: video.title,
-      artist: video.author.name,
-      artwork: video.thumbnails.map(thumbnail => {
+      artist: video.author?.name,
+      artwork: video.thumbnails?.map(thumbnail => {
         return {
           src: proxyUrl(thumbnail.url),
           sizes: `${thumbnail.width}x${thumbnail.height}`,

client/app/pages/watch.vue

@@ -77,11 +77,11 @@ const {
     videoData.description = videoData.description.replace('https://www.youtube.com', '');
   }
 
-  if (videoData.ageRestricted) {
+  if (videoData.availability?.status !== 'OK') {
     messagesStore.createMessage({
       type: 'error',
-      title: 'Age restricted content',
-      message: 'This video is age restricted. Viewing may not be possible.'
+      title: 'Video is unplayable',
+      message: videoData.availability?.reason ?? 'Unplayable for unknown reason'
     });
   }
 

client/app/store/messages.ts

@@ -1,5 +1,5 @@
-import { type MessageType } from '~/types/MessageType';
 import { defineStore } from 'pinia';
+import { type MessageType } from '~/types/MessageType';
 
 export const useMessagesStore = defineStore('messages', {
   state: () => ({
@@ -19,6 +19,9 @@ export const useMessagesStore = defineStore('messages', {
       this.messages.find(m => m.id === id).dismissed = true;
     },
     createMessage(messageData: Omit<MessageType, 'dismissed' | 'id'>) {
+      if (messageData.type === 'info') {
+        messageData.dismissDelay = 5000;
+      }
       this.addMessage({
         ...messageData,
         id: this.allMessages.length + 1,

server/src/core/videos/videos.service.ts

@@ -108,7 +108,13 @@ export class VideosService {
 
       return video;
     } catch (error) {
-      throw new InternalServerErrorException(error);
+      if (error?.message) {
+        throw new InternalServerErrorException(error.message);
+      }
+      if (error?.info?.reason) {
+        throw new InternalServerErrorException(error.info.reason);
+      }
+      throw new InternalServerErrorException('Error fetching video information');
     }
   }
 

server/src/mapper/converter/video-info/vt-video-info.converter.ts

@@ -1,8 +1,8 @@
 import { VTVideoInfoDto } from 'server/mapper/dto/vt-video-info.dto';
 import { VideoInfoSourceApproximation } from './video-info-source-approximation';
 import {
-  extractAgeRestricted,
   extractAuthor,
+  extractAvailability,
   extractCaptions,
   extractCategory,
   extractChapters,
@@ -52,7 +52,7 @@ export const toVTVideoInfoDto = (
     live: extractLive(videoInfo),
     unlisted: extractUnlisted(videoInfo),
     familyFriendly: extractFamilyFriendly(videoInfo),
-    ageRestricted: extractAgeRestricted(videoInfo),
+    availability: extractAvailability(videoInfo),
     likeCount: extractLikeCount(videoInfo),
     category: extractCategory(videoInfo),
     previewThumbnails: extractPreviewThumbnails(videoInfo),

server/src/mapper/converter/video-info/vt-video-info.extractors.ts

@@ -135,6 +135,21 @@ export const extractAgeRestricted = (videoInfo: VideoInfoSourceApproximation) =>
   return !!videoInfo?.playability_status?.reason.includes('age');
 };
 
+export const extractAvailability = (videoInfo: VideoInfoSourceApproximation) => {
+  let playabilityReason = videoInfo?.playability_status?.reason;
+  if ((videoInfo?.playability_status?.error_screen as any)?.subreason) {
+    playabilityReason += ` - ${(videoInfo?.playability_status?.error_screen as any)?.subreason}`;
+  }
+
+  if (playabilityReason.includes('confirm your age')) {
+    playabilityReason = "This video is age-restricted. It can't be played on ViewTube.";
+  }
+  return {
+    status: videoInfo?.playability_status?.status,
+    reason: playabilityReason
+  };
+};
+
 export const extractLikeCount = (videoInfo: VideoInfoSourceApproximation) => {
   return videoInfo?.basic_info?.like_count;
 };

server/src/mapper/dto/vt-video-info.dto.ts

@@ -36,9 +36,9 @@ export class VTVideoInfoDto {
   watching?: number;
   unlisted: boolean;
   familyFriendly: boolean;
-  ageRestricted?: boolean;
-  unavailable?: {
-    // reason
+  availability: {
+    status?: string;
+    reason?: string;
   };
   likeCount: number;
   category: string;

shared/src/api.schema.ts

@@ -472,7 +472,10 @@ export interface components {
       watching?: number;
       unlisted: boolean;
       familyFriendly: boolean;
-      ageRestricted?: boolean;
+      availability: {
+        status?: string;
+        reason?: string;
+      };
       likeCount: number;
       category: string;
       previewThumbnails: components["schemas"]["VTPreviewThumbnailDto"][];
@@ -1460,7 +1463,6 @@ export interface operations {
     parameters: {
       query: {
         url: string;
-        local: boolean;
       };
     };
     responses: {