PandaDEV/Qopy
1
0
Fork 0
mirror of https://github.com/0PandaDEV/Qopy.git synced 2025-04-21 21:24:05 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: youtube thumbnail having strange formats

Browse source
This commit is contained in:
PandaDEV 2024-12-17 00:00:21 +10:00
parent 14a13f44bb
commit 345f7e3f09
No known key found for this signature in database
GPG key ID: 13EFF9BAF70EE75C
2 changed files with 30 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

44
pages/index.vue
View file

@ -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,