refactor(thumb): add reason title

src/components/PlexThumbnail.vue

@@ -78,30 +78,39 @@
         >
           <v-col
             cols="12"
-            style="max-width: 100%;"
+            class="text-subtitle-2 text-truncate"
           >
-            <div
+            {{ getTitle(content, fullTitle) }}
-              class="text-subtitle-2 text-truncate"
-            >
-              {{ getTitle(content, fullTitle) }}
-            </div>
           </v-col>
 
           <v-col
             cols="12"
+            class="text-caption text-truncate text--secondary"
           >
-            <div class="text-caption text-truncate text--secondary">
+            {{ getSecondaryTitle(content, fullTitle) }}
-              {{ getSecondaryTitle(content, fullTitle) }}
+          </v-col>
-            </div>
+
+          <v-col
+            v-if="content.reason"
+            cols="12"
+            class="text-caption text-truncate text--secondary"
+          >
+            {{ getReasonTitle(content) }}
           </v-col>
         </v-row>
       </template>
 
       <div>{{ getTitle(content, fullTitle) }}</div>
+
+      <div class="text-caption text--secondary">
+        {{ getSecondaryTitle(content, fullTitle) }}
+      </div>
+
       <div
+        v-if="content.reason"
         class="text-caption text--secondary"
       >
-        {{ getSecondaryTitle(content, fullTitle) }}
+        {{ getReasonTitle(content) }}
       </div>
     </v-tooltip>
   </v-card>
@@ -295,6 +304,12 @@ export default {
     }
   },
 
+  beforeDestroy() {
+    if (this.$el.vanillaTilt) {
+      this.$el.vanillaTilt.destroy();
+    }
+  },
+
   methods: {
     getImageUrl(width) {
       return this.GET_MEDIA_IMAGE_URL({

src/components/SearchBar.vue

@@ -160,7 +160,9 @@ export default {
     ]),
 
     getItemSecondaryTitle(item) {
-      return item.reasonTitle || this.getSecondaryTitle(item);
+      return item.reason
+        ? this.getReasonTitle(item)
+        : this.getSecondaryTitle(item);
     },
 
     getItemThumb({ type, thumb, grandparentThumb }) {

src/utils/contenttitleutils.js

@@ -1,3 +1,9 @@
+const reasonWord = {
+  section: 'in',
+  actor: 'with',
+  director: 'by',
+};
+
 export default {
   getTitle: (metadata, fullTitle) => {
     switch (metadata.type) {
@@ -63,4 +69,6 @@ export default {
       }
     }
   },
+
+  getReasonTitle: ({ reason, reasonTitle }) => `${reasonWord[reason]} ${reasonTitle}`,
 };