From 345f7e3f09bc12f30072852406a6a71b6f8c86d2 Mon Sep 17 00:00:00 2001
From: PandaDEV <70103896+0PandaDEV@users.noreply.github.com>
Date: Tue, 17 Dec 2024 00:00:21 +1000
Subject: [PATCH] fix: youtube thumbnail having strange formats

---
 assets/css/index.scss | 19 +------------------
 pages/index.vue       | 44 ++++++++++++++++++++++++++++---------------
 2 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/assets/css/index.scss b/assets/css/index.scss
index 33d4af9..43fe481 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -111,7 +111,7 @@ $mutedtext: #78756f;
   align-items: center;
   overflow: hidden;
 
-  &:not(:has(.full-image, .image)) {
+  &:not(:has(.image)) {
     padding: 8px;
   }
 
@@ -119,23 +119,6 @@ $mutedtext: #78756f;
     font-family: CommitMono Nerd Font !important;
   }
 
-  .full-image {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      object-position: center;
-    }
-  }
-
   .image {
     width: 100%;
     height: 100%;
diff --git a/pages/index.vue b/pages/index.vue
index c218720..4d7be6a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -87,19 +87,24 @@
         </div>
       </template>
     </OverlayScrollbarsComponent>
+
     <div
       class="content"
       v-if="selectedItem?.content_type === ContentType.Image">
       <img :src="imageUrls[selectedItem.id]" alt="Image" class="image" />
     </div>
+    <div
+      v-else-if="selectedItem && isYoutubeWatchUrl(selectedItem.content)"
+      class="content">
+      <img
+        class="image"
+        :src="getYoutubeThumbnail(selectedItem.content)"
+        alt="YouTube Thumbnail" />
+    </div>
     <OverlayScrollbarsComponent v-else class="content">
-      <div v-if="selectedItem && isYoutubeWatchUrl(selectedItem.content)" class="full-image">
-        <img
-          :src="getYoutubeThumbnail(selectedItem.content)"
-          alt="YouTube Thumbnail" />
-      </div>
-      <span v-else>{{ selectedItem?.content || "" }}</span>
+      <span>{{ selectedItem?.content || "" }}</span>
     </OverlayScrollbarsComponent>
+
     <OverlayScrollbarsComponent
       class="information"
       :options="{ scrollbars: { autoHide: 'scroll' } }">
@@ -399,7 +404,9 @@ const scrollToSelectedItem = (forceScrollTop: boolean = false): void => {
 
       if (isAbove || isBelow) {
         const scrollOffset = isAbove
-          ? elementRect.top - viewportRect.top - (selectedItemIndex.value === 0 ? 36 : 8)
+          ? elementRect.top -
+            viewportRect.top -
+            (selectedItemIndex.value === 0 ? 36 : 8)
           : elementRect.bottom - viewportRect.bottom + 9;
 
         viewport.scrollBy({ top: scrollOffset, behavior: "smooth" });
@@ -504,8 +511,8 @@ const getYoutubeThumbnail = (url: string): string => {
     videoId = url.match(/[?&]v=([^&]+)/)?.[1];
   }
   return videoId
-    ? `https://img.youtube.com/vi/${videoId}/0.jpg`
-    : "https://via.placeholder.com/150";
+    ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`
+    : "https://via.placeholder.com/1280x720";
 };
 
 const getFaviconFromDb = (favicon: string): string => {
@@ -515,9 +522,9 @@ const getFaviconFromDb = (favicon: string): string => {
 const updateHistory = async (resetScroll: boolean = false): Promise<void> => {
   const results = await $history.loadHistoryChunk(0, CHUNK_SIZE);
   if (results.length > 0) {
-    const existingIds = new Set(history.value.map(item => item.id));
-    const uniqueNewItems = results.filter(item => !existingIds.has(item.id));
-    
+    const existingIds = new Set(history.value.map((item) => item.id));
+    const uniqueNewItems = results.filter((item) => !existingIds.has(item.id));
+
     const processedNewItems = await Promise.all(
       uniqueNewItems.map(async (item) => {
         const historyItem = new HistoryItem(
@@ -567,7 +574,10 @@ const updateHistory = async (resetScroll: boolean = false): Promise<void> => {
 
     history.value = [...processedNewItems, ...history.value];
 
-    if (resetScroll && resultsContainer.value?.osInstance()?.elements().viewport) {
+    if (
+      resetScroll &&
+      resultsContainer.value?.osInstance()?.elements().viewport
+    ) {
       resultsContainer.value.osInstance()?.elements().viewport?.scrollTo({
         top: 0,
         behavior: "smooth",
@@ -604,7 +614,9 @@ const setupEventListeners = async (): Promise<void> => {
       const previousState = {
         groupIndex: selectedGroupIndex.value,
         itemIndex: selectedItemIndex.value,
-        scroll: resultsContainer.value?.osInstance()?.elements().viewport?.scrollTop || 0,
+        scroll:
+          resultsContainer.value?.osInstance()?.elements().viewport
+            ?.scrollTop || 0,
       };
 
       await updateHistory();
@@ -612,7 +624,9 @@ const setupEventListeners = async (): Promise<void> => {
       handleSelection(previousState.groupIndex, previousState.itemIndex, false);
 
       nextTick(() => {
-        const viewport = resultsContainer.value?.osInstance()?.elements().viewport;
+        const viewport = resultsContainer.value
+          ?.osInstance()
+          ?.elements().viewport;
         if (viewport) {
           viewport.scrollTo({
             top: previousState.scroll,