From eeb0c488cc44ca3129a7e0095aef1fd540e01943 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:41:44 -0500
Subject: [PATCH] Add support for upcoming livestream trailers

---
 src/renderer/helpers/api/local.js   | 10 +++--
 src/renderer/views/Watch/Watch.js   |  6 ++-
 src/renderer/views/Watch/Watch.scss | 63 ++++++++++++++++-------------
 src/renderer/views/Watch/Watch.vue  | 35 +++++++++++++++-
 4 files changed, 80 insertions(+), 34 deletions(-)

diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
index eca38551dd6af..aea403251b3d8 100644
--- a/src/renderer/helpers/api/local.js
+++ b/src/renderer/helpers/api/local.js
@@ -255,15 +255,19 @@ export async function getLocalVideoInfo(id) {
     return info
   }
 
-  if (hasTrailer) {
-    /** @type {import('youtubei.js').YTNodes.PlayerLegacyDesktopYpcTrailer} */
+  if (hasTrailer && info.playability_status.status !== 'OK') {
+    /** @type {import('youtubei.js').YTNodes.PlayerLegacyDesktopYpcTrailer | import('youtubei.js').YTNodes.YpcTrailer} */
     const trailerScreen = info.playability_status.error_screen
 
     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
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index e768dd733869c..ea204a0edcb82 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -127,6 +127,7 @@ export default defineComponent({
       infoAreaSticky: true,
       blockVideoAutoplay: false,
       autoplayInterruptionTimeout: null,
+      playabilityStatus: '',
 
       onMountedRun: false,
 
@@ -536,6 +537,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'
@@ -677,7 +679,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
diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss
index edefbb85a23ea..346d80ef87790 100644
--- a/src/renderer/views/Watch/Watch.scss
+++ b/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 {
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index e5eab3bc24364..647d4774f96ac 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/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,7 +50,38 @@
           @playback-rate-updated="updatePlaybackRate"
         />
         <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