mirror of
https://github.com/xpltdco/media-rip.git
synced 2026-04-03 02:53:58 -06:00
Fix table overflow, clickable source URLs, duplicate preview
Table overflow fix:
- table-layout: fixed prevents columns expanding beyond max-width
- min-width: 0 on flex children ensures text-overflow works
- Long filenames now properly truncate with ellipsis
Clickable source URLs:
- Name column is now an <a> link to the original source URL
- Opens in new tab (target=_blank, rel=noopener)
- Styled to inherit text color, underline + accent on hover
- @click.stop prevents row selection interference
Duplicate preview box fix:
- When urlInfo.type === 'unknown', urlInfo is now set to null
- Previously both the preview box ('VIDEO' badge) and error message
showed simultaneously. Now only the error message appears.
This commit is contained in:
parent
1e9014f569
commit
8ac0e05b15
2 changed files with 21 additions and 3 deletions
|
|
@ -192,13 +192,20 @@ async function clearJob(jobId: string): Promise<void> {
|
||||||
</thead>
|
</thead>
|
||||||
<TransitionGroup name="table-row" tag="tbody">
|
<TransitionGroup name="table-row" tag="tbody">
|
||||||
<tr v-for="job in sortedJobs" :key="job.id" :class="'row-' + job.status">
|
<tr v-for="job in sortedJobs" :key="job.id" :class="'row-' + job.status">
|
||||||
<td class="col-name" :title="job.url">
|
<td class="col-name">
|
||||||
<span class="name-with-icon">
|
<a
|
||||||
|
class="name-with-icon"
|
||||||
|
:href="job.url"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
:title="job.url"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
<!-- Media type icon -->
|
<!-- Media type icon -->
|
||||||
<svg v-if="isAudioJob(job)" class="media-icon audio-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
<svg v-if="isAudioJob(job)" class="media-icon audio-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
||||||
<svg v-else class="media-icon video-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
<svg v-else class="media-icon video-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
||||||
<span class="name-text">{{ displayName(job) }}</span>
|
<span class="name-text">{{ displayName(job) }}</span>
|
||||||
</span>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td class="col-status">
|
<td class="col-status">
|
||||||
<span class="status-badge" :class="'badge-' + job.status">
|
<span class="status-badge" :class="'badge-' + job.status">
|
||||||
|
|
@ -298,6 +305,7 @@ async function clearJob(jobId: string): Promise<void> {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
|
table-layout: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-table thead {
|
.download-table thead {
|
||||||
|
|
@ -356,6 +364,14 @@ async function clearJob(jobId: string): Promise<void> {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-sm);
|
gap: var(--space-sm);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
min-width: 0;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.name-with-icon:hover .name-text {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: var(--color-accent-primary, #00a8ff);
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-icon {
|
.media-icon {
|
||||||
|
|
@ -368,6 +384,7 @@ async function clearJob(jobId: string): Promise<void> {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-status { width: 100px; }
|
.col-status { width: 100px; }
|
||||||
|
|
|
||||||
|
|
@ -195,6 +195,7 @@ function handlePaste(): void {
|
||||||
// Check if URL yielded anything useful
|
// Check if URL yielded anything useful
|
||||||
if (urlInfo.value?.type === 'unknown') {
|
if (urlInfo.value?.type === 'unknown') {
|
||||||
analyzeError.value = 'No downloadable media found at this URL.'
|
analyzeError.value = 'No downloadable media found at this URL.'
|
||||||
|
urlInfo.value = null
|
||||||
} else if (!urlInfo.value && !extractError.value) {
|
} else if (!urlInfo.value && !extractError.value) {
|
||||||
analyzeError.value = 'Could not reach this URL. Check the address and try again.'
|
analyzeError.value = 'Could not reach this URL. Check the address and try again.'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue