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

fixed image display and changes to file icon

Browse source
This commit is contained in:
pandadev 2024-07-17 00:29:12 +02:00
parent 4e2dcc9df3
commit fa7797cabf
No known key found for this signature in database
GPG key ID: C39629DACB8E762F
3 changed files with 46 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

26
app.vue
View file

@ -32,11 +32,10 @@
:class="['result clothoid-corner', { 'selected': isSelected(groupIndex, index) }]"
@click="selectItem(groupIndex, index)"
:ref="el => { if (isSelected(groupIndex, index)) selectedElement = el }">
<img v-if="isUrl(item.content)" :src="getFaviconFromDb(item.favicon)" alt="Favicon" class="favicon">
<FileIcon v-else />
<img v-if="item.content_type === 'image'"
:src="item.content.startsWith('data:image') ? item.content : `data:image/bmp;base64,${item.content}`"
alt="Image" class="preview-image">
<img v-if="item.content_type === 'image'" :src="`data:image/bmp;base64,${item.content}`" alt="Image" class="favicon-image">
<img v-else-if="isUrl(item.content)" :src="getFaviconFromDb(item.favicon)" alt="Favicon" class="favicon">
<FileIcon class="file" v-else />
<span v-if="item.content_type === 'image'">Image ({{ getImageDimensions(item.content) }})</span>
<span v-else>{{ truncateContent(item.content) }}</span>
</div>
</template>
@ -44,7 +43,7 @@
<OverlayScrollbarsComponent class="content">
<img v-if="selectedItem?.content_type === 'image'"
:src="selectedItem.content.startsWith('data:image') ? selectedItem?.content : `data:image/bmp;base64,${selectedItem?.content}`"
alt="Image" class="full-image">
alt="Image" class="image">
<img v-else-if="isYoutubeWatchUrl(selectedItem?.content)" :src="getYoutubeThumbnail(selectedItem.content)"
alt="YouTube Thumbnail" class="full-image">
<span v-else>{{ selectedItem?.content || '' }}</span>
@ -192,11 +191,16 @@ const isUrl = (str) => {
};
const isYoutubeWatchUrl = (url) => {
return /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/watch\?v=[\w-]+/.test(url);
return /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/watch\?v=[\w-]+/.test(url) || /^(https?:\/\/)?(www\.)?youtu\.be\/[\w-]+/.test(url);
};
const getYoutubeThumbnail = (url) => {
const videoId = url.match(/[?&]v=([^&]+)/)[1];
let videoId;
if (url.includes('youtu.be')) {
videoId = url.split('youtu.be/')[1];
} else {
videoId = url.match(/[?&]v=([^&]+)/)[1];
}
return `https://img.youtube.com/vi/${videoId}/0.jpg`;
};
@ -204,6 +208,12 @@ const getFaviconFromDb = (favicon) => {
return `data:image/png;base64,${favicon}`;
};
const getImageDimensions = (base64Image) => {
const img = new Image();
img.src = `data:image/bmp;base64,${base64Image}`;
return `${img.width}x${img.height}`;
};
const refreshHistory = async () => {
history.value = [];
await loadMoreHistory();