Add support for upcoming livestream trailers

src/renderer/helpers/api/local.js

@@ -1,4 +1,4 @@
-import { ClientType, Innertube, Misc, Mixins, Parser, UniversalCache, Utils, YT, YTNodes } from 'youtubei.js'
+import { ClientType, Innertube, Misc, Parser, UniversalCache, Utils, YT, YTNodes } from 'youtubei.js'
 import Autolinker from 'autolinker'
 import { IpcChannels, SEARCH_CHAR_LIMIT } from '../../../constants'
 
@@ -255,15 +255,16 @@ export async function getLocalVideoInfo(id) {
     return info
   }
 
-  if (hasTrailer) {
-    /** @type {import('youtubei.js').YTNodes.PlayerLegacyDesktopYpcTrailer} */
-    const trailerScreen = info.playability_status.error_screen
+  if (hasTrailer && info.playability_status.status !== 'OK') {
+    const trailerInfo = info.getTrailerInfo()
 
-    const trailerInfo = new Mixins.MediaInfo([{ data: trailerScreen.trailer.player_response }])
+    // don't override the timestamp of when the video will premiere for upcoming videos
+    if (info.playability_status.status !== 'LIVE_STREAM_OFFLINE') {
+      info.basic_info.start_timestamp = trailerInfo.basic_info.start_timestamp
+    }
 
     info.playability_status = trailerInfo.playability_status
     info.streaming_data = trailerInfo.streaming_data
-    info.basic_info.start_timestamp = trailerInfo.basic_info.start_timestamp
     info.basic_info.duration = trailerInfo.basic_info.duration
     info.captions = trailerInfo.captions
     info.storyboards = trailerInfo.storyboards

src/renderer/views/Watch/Watch.js

@@ -129,6 +129,7 @@ export default defineComponent({
       infoAreaSticky: true,
       blockVideoAutoplay: false,
       autoplayInterruptionTimeout: null,
+      playabilityStatus: '',
 
       onMountedRun: false,
 
@@ -542,6 +543,7 @@ export default defineComponent({
         this.videoChapters = chapters
 
         const playabilityStatus = result.playability_status
+        this.playabilityStatus = playabilityStatus.status
 
         // The apostrophe is intentionally that one (char code 8217), because that is the one YouTube uses
         const BOT_MESSAGE = 'Sign in to confirm you’re not a bot'
@@ -683,7 +685,9 @@ export default defineComponent({
             this.upcomingTimeLeft = null
             this.premiereDate = undefined
           }
-        } else {
+        }
+
+        if (!this.isUpcoming || (this.isUpcoming && this.playabilityStatus === 'OK')) {
           this.videoLengthSeconds = result.basic_info.duration
           if (result.streaming_data) {
             this.streamingDataExpiryDate = result.streaming_data.expires

src/renderer/views/Watch/Watch.scss

@@ -21,6 +21,41 @@
   }
 }
 
+.premiereDate {
+  align-items: center;
+  background-color: rgb(0 0 0 / 80%);
+  border-radius: 5px;
+  inset-block-end: 12px;
+  color: #fff;
+  display: flex;
+  block-size: 60px;
+  inset-inline-start: 12px;
+  padding-block: 0;
+  padding-inline: 12px;
+
+  .premiereIcon {
+    float: inline-start;
+    font-size: 25px;
+    margin-block: 0;
+    margin-inline: 12px;
+  }
+
+  .premiereText {
+    margin-block: 0;
+    margin-inline: 12px;
+    min-inline-size: 200px;
+
+    .premiereTextTimestamp {
+      font-size: 0.85em;
+      font-weight: bold;
+    }
+  }
+}
+
+.trailer .premiereDate {
+  margin-block-start: 8px;
+}
+
 .videoLayout {
   @include dual-column-template;
 
@@ -52,35 +87,7 @@
       }
 
       .premiereDate {
-        align-items: center;
-        background-color: rgb(0 0 0 / 80%);
-        border-radius: 5px;
-        inset-block-end: 12px;
-        color: #fff;
-        display: flex;
-        block-size: 60px;
-        inset-inline-start: 12px;
-        padding-block: 0;
-        padding-inline: 12px;
         position: absolute;
-
-        .premiereIcon {
-          float: inline-start;
-          font-size: 25px;
-          margin-block: 0;
-          margin-inline: 12px;
-        }
-
-        .premiereText {
-          margin-block: 0;
-          margin-inline: 12px;
-          min-inline-size: 200px;
-
-          .premiereTextTimestamp {
-            font-size: 0.85em;
-            font-weight: bold;
-          }
-        }
       }
 
       .errorContainer {

src/renderer/views/Watch/Watch.vue

@@ -17,7 +17,7 @@
     >
       <div class="videoAreaMargin">
         <ft-shaka-video-player
-          v-if="!isLoading && !isUpcoming && !errorMessage"
+          v-if="!isLoading && (!isUpcoming || playabilityStatus === 'OK') && !errorMessage"
           ref="player"
           :manifest-src="manifestSrc"
           :manifest-mime-type="manifestMimeType"
@@ -50,10 +50,12 @@
           @playback-rate-updated="updatePlaybackRate"
         />
         <div
-          v-if="!isLoading && (isUpcoming || errorMessage)"
+          v-else-if="!isLoading && (isUpcoming || errorMessage)"
           class="videoPlayer"
+          :class="{trailer: isUpcoming && playabilityStatus === 'OK'}"
         >
           <img
+            v-if="!isUpcoming || playabilityStatus !== 'OK'"
             :src="thumbnail"
             class="videoThumbnail"
             alt=""