From d19d124b385ffdfe40634e80b908ae3760c216f6 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sat, 23 Apr 2022 17:53:24 +1200
Subject: [PATCH] fix: calculated values

---
 .../CompactRenderers/compactVideoRenderer.vue | 20 ++++++++++++-------
 .../gridRenderers/gridVideoRenderer.vue       | 20 ++++++++++++-------
 .../videoWithContextRenderer.vue              | 20 ++++++++++++-------
 3 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/NUXT/components/CompactRenderers/compactVideoRenderer.vue b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
index d3055b8..c95de80 100644
--- a/NUXT/components/CompactRenderers/compactVideoRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
@@ -2,13 +2,8 @@
   <base-video-renderer
     :vidId="video.videoId"
     :thumbnails="video.thumbnail.thumbnails"
-    :thumbnailOverlayStyle="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.style
-    "
-    :thumbnailOverlayText="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.text
-        .runs[0].text
-    "
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
     :channelUrl="
       this.$rendererUtils.getNavigationEndpoints(video.shortBylineText.runs[0])
     "
@@ -28,6 +23,17 @@ export default {
     baseVideoRenderer,
   },
 
+  computed: {
+    thumbnailOverlayText() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.text.runs[0].text;
+    },
+    thumbnailOverlayStyle() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.style;
+    },
+  },
+
   methods: {
     parseBottom(video) {
       const bottomText = [
diff --git a/NUXT/components/gridRenderers/gridVideoRenderer.vue b/NUXT/components/gridRenderers/gridVideoRenderer.vue
index 2a94bb4..949336e 100644
--- a/NUXT/components/gridRenderers/gridVideoRenderer.vue
+++ b/NUXT/components/gridRenderers/gridVideoRenderer.vue
@@ -2,13 +2,8 @@
   <base-video-renderer
     :vidId="video.videoId"
     :thumbnails="video.thumbnail.thumbnails"
-    :thumbnailOverlayStyle="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.style
-    "
-    :thumbnailOverlayText="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.text
-        .runs[0].text
-    "
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
     :channelUrl="
       $rendererUtils.getNavigationEndpoints(
         video.shortBylineText.runs[0].navigationEndpoint
@@ -30,6 +25,17 @@ export default {
     baseVideoRenderer,
   },
 
+  computed: {
+    thumbnailOverlayText() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.text.runs[0].text;
+    },
+    thumbnailOverlayStyle() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.style;
+    },
+  },
+
   methods: {
     parseBottom(video) {
       const bottomText = [
diff --git a/NUXT/components/gridRenderers/videoWithContextRenderer.vue b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
index 638e238..a353d73 100644
--- a/NUXT/components/gridRenderers/videoWithContextRenderer.vue
+++ b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
@@ -2,13 +2,8 @@
   <base-video-renderer
     :vidId="video.videoId"
     :thumbnails="video.thumbnail.thumbnails"
-    :thumbnailOverlayStyle="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.style
-    "
-    :thumbnailOverlayText="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.text
-        .runs[0].text
-    "
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
     :channelUrl="
       $rendererUtils.getNavigationEndpoints(
         video.shortBylineText.runs[0].navigationEndpoint
@@ -33,6 +28,17 @@ export default {
     baseVideoRenderer,
   },
 
+  computed: {
+    thumbnailOverlayText() {
+      return this.video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer
+        .text.runs[0].text;
+    },
+    thumbnailOverlayStyle() {
+      return this.video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer
+        .style;
+    },
+  },
+
   methods: {
     parseBottom(video) {
       const bottomText = [