reuse template in the view when possible

Author: ChunkyProgrammer

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'
 
@@ -256,10 +256,7 @@ export async function getLocalVideoInfo(id) {
   }
 
   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 }])
+    const trailerInfo = info.getTrailerInfo()
 
     // don't override the timestamp of when the video will premiere for upcoming videos
     if (info.playability_status.status !== 'LIVE_STREAM_OFFLINE') {

src/renderer/views/Watch/Watch.scss

@@ -52,7 +52,7 @@
   }
 }
 
-.trailer.premiereDate {
+.trailer .premiereDate {
   margin-block-start: 8px;
 }
 

src/renderer/views/Watch/Watch.vue

@@ -49,42 +49,13 @@
           @toggle-autoplay="toggleAutoplay"
           @playback-rate-updated="updatePlaybackRate"
         />
-        <div
-          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"
+          :class="{trailer: isUpcoming && playabilityStatus === 'OK'}"
         >
           <img
+            v-if="!isUpcoming || playabilityStatus !== 'OK'"
             :src="thumbnail"
             class="videoThumbnail"
             alt=""