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 @@ +
Image
+
+ YouTube Thumbnail +
-
- YouTube Thumbnail -
- {{ selectedItem?.content || "" }} + {{ selectedItem?.content || "" }}
+ @@ -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 => { 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 => { 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 => { 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 => { 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,