diff --git a/app.vue b/app.vue
index 8874f49..47f3ed3 100644
--- a/app.vue
+++ b/app.vue
@@ -32,11 +32,10 @@
:class="['result clothoid-corner', { 'selected': isSelected(groupIndex, index) }]"
@click="selectItem(groupIndex, index)"
:ref="el => { if (isSelected(groupIndex, index)) selectedElement = el }">
- ![Favicon]()
-
- ![Image]()
+ ![Image]()
+ ![Favicon]()
+
+ Image ({{ getImageDimensions(item.content) }})
{{ truncateContent(item.content) }}
@@ -44,7 +43,7 @@
![Image]()
+ alt="Image" class="image">
![YouTube Thumbnail]()
{{ selectedItem?.content || '' }}
@@ -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();
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 036e774..8333673 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -52,7 +52,7 @@ body,
background-color: transparent;
}
-.os-scrollbar-horizontal{
+.os-scrollbar-horizontal {
display: none;
}
@@ -102,10 +102,13 @@ body,
font-size: 14px;
align-items: center;
display: flex;
- padding: 12px;
- padding-left: 12px;
+ padding: 10px;
+ padding-inline: 10px;
letter-spacing: 0.5px;
gap: 16px;
+ overflow: hidden;
+ text-overflow: clip;
+ white-space: nowrap;
}
.result {
@@ -116,7 +119,7 @@ body,
}
}
- .time-separator{
+ .time-separator {
font-size: 12px;
color: $text2;
font-family: SFRoundedSemiBold;
@@ -125,10 +128,18 @@ body,
padding-top: 14px;
}
- .favicon{
- width: 14px;
+ .favicon {
+ width: 20px;
}
+ .favicon-image{
+ width: 20px;
+ height: 20px;
+ }
+
+ .file{
+ margin-inline: 2px;
+ }
}
.content {
@@ -143,18 +154,22 @@ body,
width: calc(100vw - 286px);
white-space: pre-wrap;
word-wrap: break-word;
-
+
div {
border-radius: 10px;
font-family: SFMonoRegular !important;
}
- .full-image{
+ .full-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
}
+
+ .image {
+ width: 100%;
+ }
}
.bottom-bar {
diff --git a/public/file.svg b/public/file.svg
index 419be8d..ef44dbe 100644
--- a/public/file.svg
+++ b/public/file.svg
@@ -1,10 +1,8 @@
-