Add support for upcoming livestream trailers

Author: ChunkyProgrammer

src/renderer/helpers/api/local.js

@@ -247,10 +247,17 @@ export async function getLocalVideoInfo(id) {
   const hasTrailer = info.has_trailer
   const trailerIsAgeRestricted = info.getTrailerInfo() === null
 
-  if (hasTrailer) {
-    /** @type {import('youtubei.js').YTNodes.PlayerLegacyDesktopYpcTrailer} */
-    const trailerScreen = info.playability_status.error_screen
-    id = trailerScreen.video_id
+  // upcoming videos can have trailers so we wont fetch the trailer if the original video is playable
+  if (hasTrailer && info.playability_status.status !== 'OK') {
+    if (info.playability_status.error_screen.type === 'PlayerLegacyDesktopYpcTrailer') {
+      /** @type {import('youtubei.js').YTNodes.PlayerLegacyDesktopYpcTrailer} */
+      const trailerScreen = info.playability_status.error_screen
+      id = trailerScreen.video_id
+    } else {
+      /** @type {import('youtubei.js').YTNodes.YpcTrailer} */
+      const trailerScreen = info.playability_status.error_screen
+      id = trailerScreen.player_response.videoDetails.videoId
+    }
   }
 
   if ((info.playability_status.status === 'UNPLAYABLE' && (!hasTrailer || trailerIsAgeRestricted)) ||
@@ -263,9 +270,13 @@ export async function getLocalVideoInfo(id) {
   const iosInfo = await iosInnertube.getBasicInfo(id, 'iOS')
 
   if (hasTrailer) {
+    // 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 = iosInfo.basic_info.start_timestamp
+    }
+
     info.playability_status = iosInfo.playability_status
     info.streaming_data = iosInfo.streaming_data
-    info.basic_info.start_timestamp = iosInfo.basic_info.start_timestamp
     info.basic_info.duration = iosInfo.basic_info.duration
     info.captions = iosInfo.captions
     info.storyboards = iosInfo.storyboards

src/renderer/views/Watch/Watch.js

@@ -123,6 +123,7 @@ export default defineComponent({
       infoAreaSticky: true,
       blockVideoAutoplay: false,
       autoplayInterruptionTimeout: null,
+      playabilityStatus: '',
 
       onMountedRun: false,
 
@@ -502,6 +503,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'
@@ -644,7 +646,9 @@ export default defineComponent({
             this.upcomingTimestamp = null
             this.upcomingTimeLeft = null
           }
-        } 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: var(--float-left-ltr-rtl-value);
+    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: var(--float-left-ltr-rtl-value);
-          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"
@@ -42,7 +42,38 @@
           @toggle-theatre-mode="useTheatreMode = !useTheatreMode"
         />
         <div
-          v-if="!isLoading && (isUpcoming || errorMessage)"
+          v-if="!isLoading && isUpcoming && playabilityStatus === 'OK'"
+          class="trailer premiereDate"
+        >
+          <font-awesome-icon
+            :icon="['fas', 'satellite-dish']"
+            class="premiereIcon"
+          />
+          <p
+            v-if="upcomingTimestamp !== null"
+            class="premiereText"
+          >
+            <span
+              class="premiereTextTimeLeft"
+            >
+              {{ $t("Video.Premieres") }} {{ upcomingTimeLeft }}
+            </span>
+            <br>
+            <span
+              class="premiereTextTimestamp"
+            >
+              {{ upcomingTimestamp }}
+            </span>
+          </p>
+          <p
+            v-else
+            class="premiereText"
+          >
+            {{ $t("Video.Starting soon, please refresh the page to check again") }}
+          </p>
+        </div>
+        <div
+          v-else-if="!isLoading && (isUpcoming || errorMessage)"
           class="videoPlayer"
         >
           <img