553 lines
16 KiB
Vue
553 lines
16 KiB
Vue
<template>
|
|
<div class="card floating metadata-card">
|
|
<div class="card-title title-with-actions">
|
|
<h2>{{ trans('files.metadata','Metadata') }}</h2>
|
|
<div class="title-actions">
|
|
<button
|
|
type="button"
|
|
class="button button--flat"
|
|
@click="toggleAddField"
|
|
:aria-label="trans('buttons.addField','Add field')"
|
|
:title="trans('buttons.addField','Add field')"
|
|
>
|
|
{{ trans('buttons.addField','Add field') }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="button button--primary"
|
|
@click.prevent="applyAll"
|
|
:aria-label="trans('buttons.apply','Apply')"
|
|
:title="trans('buttons.apply','Apply')"
|
|
>
|
|
{{ trans('buttons.apply','Apply') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
<p v-if="selectedCount > 1">
|
|
{{ $t('prompts.filesSelected', { count: selectedCount }) }}
|
|
</p>
|
|
|
|
<template v-if="selectedCount === 0">
|
|
<p>{{ $t('prompts.noFileSelected') }}</p>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div v-if="addFieldVisible" class="add-field-row">
|
|
<div class="add-field-controls">
|
|
<input
|
|
v-model="addFieldKey"
|
|
type="text"
|
|
:placeholder="trans('prompts.newFieldName','Field name')"
|
|
/>
|
|
<input
|
|
v-model="addFieldValue"
|
|
type="text"
|
|
:placeholder="trans('prompts.newFieldValue','Value')"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="button button--primary"
|
|
@click="confirmAddField"
|
|
:aria-label="trans('buttons.add','Add')"
|
|
:title="trans('buttons.add','Add')"
|
|
>
|
|
{{ trans('buttons.add','Add') }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="button button--flat"
|
|
@click="cancelAddField"
|
|
>
|
|
{{ trans('buttons.cancel','Cancel') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="metadata-table-wrapper">
|
|
<table class="metadata-table">
|
|
<colgroup>
|
|
<col class="col-label" />
|
|
<col class="col-current" />
|
|
<col class="col-new" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th class="hdr-field">{{ trans('prompts.field','Field') }}</th>
|
|
<th class="hdr-current">{{ trans('prompts.current','Current') }}</th>
|
|
<th class="hdr-new">{{ trans('prompts.new','New') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="field in fields" :key="field" class="metadata-row">
|
|
<td class="metadata-title"><strong>{{ fieldLabels[field] || humanize(field) }}</strong></td>
|
|
<td class="metadata-current">
|
|
<template v-if="isPicture(field)">
|
|
<img :src="pictureSrc(field)" alt="cover" class="cover-preview" v-if="pictureSrc(field)" />
|
|
<span v-else class="metadata-muted">{{ trans('prompts.noCover','No cover') }}</span>
|
|
</template>
|
|
<template v-else>
|
|
{{ displayCurrent(field) }}
|
|
</template>
|
|
</td>
|
|
<td class="metadata-edit-cell">
|
|
<input
|
|
v-model="newValues[field]"
|
|
:placeholder="placeholders[field] || ''"
|
|
type="text"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="card-action">
|
|
<button
|
|
id="focus-prompt"
|
|
type="button"
|
|
@click="closeHovers"
|
|
class="button button--flat"
|
|
:aria-label="trans('buttons.ok','OK')"
|
|
:title="trans('buttons.ok','OK')"
|
|
>
|
|
{{ trans('buttons.ok','OK') }}
|
|
</button>
|
|
|
|
<button
|
|
id="apply-metadata"
|
|
type="button"
|
|
@click.prevent="applyAll"
|
|
class="button button--primary"
|
|
:aria-label="trans('buttons.apply','Apply')"
|
|
:title="trans('buttons.apply','Apply')"
|
|
>
|
|
{{ trans('buttons.apply','Apply') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapState } from "pinia";
|
|
import { useFileStore } from "@/stores/file";
|
|
import { useLayoutStore } from "@/stores/layout";
|
|
import { metadata as apiMetadata, updateMetadata } from "@/api/files";
|
|
|
|
export default {
|
|
name: "modifyMetadata",
|
|
inject: ["$showError"],
|
|
data() {
|
|
return {
|
|
// fields will be derived dynamically from metadata across selected files
|
|
fields: [],
|
|
fieldLabels: {},
|
|
placeholders: {},
|
|
metadataList: [],
|
|
newValues: {},
|
|
// add field UI state
|
|
addFieldVisible: false,
|
|
addFieldKey: "",
|
|
addFieldValue: "",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(useFileStore, ["req", "selected", "selectedCount"]),
|
|
},
|
|
methods: {
|
|
...mapActions(useLayoutStore, ["closeHovers"]),
|
|
async mountedFetch() {
|
|
if (!this.req) return;
|
|
|
|
const files = this.selected.map((i) => this.req.items[i].url);
|
|
|
|
// Fetch metadata for each selected file if possible
|
|
try {
|
|
const promises = files.map((u) => apiMetadata(u));
|
|
this.metadataList = (await Promise.all(promises)).map((m) => m || {});
|
|
} catch (e) {
|
|
this.metadataList = [];
|
|
}
|
|
|
|
// Build union of fields
|
|
const keys = new Set();
|
|
this.metadataList.forEach((m) => {
|
|
Object.keys(m).forEach((k) => keys.add(k));
|
|
});
|
|
|
|
// Ensure stable ordering: put common fields first
|
|
const preferred = ["title", "artist", "album", "track", "genre", "date", "comment", "disc", "composer", "year", "albumartist", "picture", "cover"];
|
|
const rest = Array.from(keys).filter((k) => !preferred.includes(k)).sort();
|
|
this.fields = preferred.filter((k) => keys.has(k)).concat(rest);
|
|
|
|
// Setup field labels (use translation when available, otherwise humanize)
|
|
this.fields.forEach((f) => {
|
|
this.fieldLabels[f] = this.trans(`prompts.${f}`, this.humanize(f));
|
|
this.newValues[f] = "";
|
|
});
|
|
},
|
|
toggleAddField() {
|
|
this.addFieldVisible = !this.addFieldVisible;
|
|
if (this.addFieldVisible) {
|
|
this.addFieldKey = "";
|
|
this.addFieldValue = "";
|
|
}
|
|
},
|
|
cancelAddField() {
|
|
this.addFieldVisible = false;
|
|
this.addFieldKey = "";
|
|
this.addFieldValue = "";
|
|
},
|
|
confirmAddField() {
|
|
const key = String(this.addFieldKey || "").trim();
|
|
const val = String(this.addFieldValue || "").trim();
|
|
if (!key) return;
|
|
// If field doesn't exist yet, add it to the top for visibility
|
|
if (!this.fields.includes(key)) {
|
|
this.fields.unshift(key);
|
|
this.fieldLabels[key] = this.trans(`prompts.${key}`, this.humanize(key));
|
|
}
|
|
// Initialize newValues entry and set initial value if provided
|
|
if (!(key in this.newValues)) this.newValues[key] = "";
|
|
if (val !== "") this.newValues[key] = val;
|
|
this.cancelAddField();
|
|
},
|
|
displayCurrent(field) {
|
|
if (!this.metadataList || this.metadataList.length === 0) return "";
|
|
|
|
const vals = this.metadataList.map((m) => {
|
|
const v = m[field];
|
|
if (v === undefined || v === null) return "";
|
|
if (typeof v === "object") return JSON.stringify(v);
|
|
return String(v);
|
|
});
|
|
|
|
const nonEmpty = vals.filter((v) => v !== "");
|
|
if (nonEmpty.length === 0) return "";
|
|
|
|
const allEqual = nonEmpty.every((v) => v === nonEmpty[0]);
|
|
if (allEqual) return nonEmpty[0];
|
|
|
|
// Count how many distinct values
|
|
const distinct = new Set(nonEmpty);
|
|
// If fields are objects (e.g., picture) avoid returning huge JSON blobs.
|
|
// Prefer a short summary.
|
|
const sample = nonEmpty[0];
|
|
if (typeof sample === 'string') {
|
|
return this.trans('prompts.multipleValuesCount', `(different on ${distinct.size} files)`).replace('{count}', String(distinct.size));
|
|
}
|
|
|
|
try {
|
|
const s = JSON.stringify(sample);
|
|
return s.length > 200 ? s.slice(0, 200) + '…' : s;
|
|
} catch (e) {
|
|
return this.trans('prompts.multipleValuesCount', `(different on ${distinct.size} files)`).replace('{count}', String(distinct.size));
|
|
}
|
|
},
|
|
|
|
isPicture(field) {
|
|
if (!this.metadataList || this.metadataList.length === 0) return false;
|
|
for (const m of this.metadataList) {
|
|
const v = m[field];
|
|
if (v && typeof v === 'object') {
|
|
if (v.data && typeof v.data === 'string') return true;
|
|
if (v.picture && v.picture.data) return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
pictureSrc(field) {
|
|
if (!this.metadataList) return null;
|
|
for (const m of this.metadataList) {
|
|
const v = m[field];
|
|
if (v && typeof v === 'object') {
|
|
if (v.data && typeof v.data === 'string') return v.data;
|
|
if (v.picture && v.picture.data) return v.picture.data;
|
|
// sometimes library stores a raw buffer as base64 directly in 'data'
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
trans(key, fallback) {
|
|
// Fallback to a human readable string if translation key is missing
|
|
try {
|
|
if (this.$te && this.$te(key)) return this.$t(key);
|
|
} catch (e) {
|
|
// ignore
|
|
}
|
|
return fallback;
|
|
},
|
|
|
|
humanize(str) {
|
|
if (!str) return str;
|
|
// replace camelCase / snake_case / dots with spaces and capitalize
|
|
const s = String(str)
|
|
.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
|
|
.replace(/[_\.\-]+/g, " ");
|
|
return s.charAt(0).toUpperCase() + s.slice(1);
|
|
},
|
|
|
|
async applyAll() {
|
|
if (!this.req) return;
|
|
|
|
// collect changed fields
|
|
const changes = {};
|
|
Object.keys(this.newValues).forEach((k) => {
|
|
const v = this.newValues[k];
|
|
if (v !== undefined && v !== null && String(v).trim() !== "") {
|
|
changes[k] = v;
|
|
}
|
|
});
|
|
|
|
if (Object.keys(changes).length === 0) {
|
|
// nothing to do
|
|
return;
|
|
}
|
|
|
|
const files = this.selected.map((i) => this.req.items[i].url);
|
|
|
|
try {
|
|
// apply changes to each file
|
|
await Promise.all(
|
|
files.map((u) => updateMetadata(u, changes))
|
|
);
|
|
// refresh listing
|
|
const fileStore = useFileStore();
|
|
fileStore.reload = true;
|
|
this.closeHovers();
|
|
} catch (e) {
|
|
this.$showError(e);
|
|
}
|
|
},
|
|
// per-field apply removed in favor of global applyAll
|
|
},
|
|
mounted() {
|
|
this.mountedFetch();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.metadata-card {
|
|
max-height: calc(100vh - 120px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
/* prefer a wider layout on large screens but stay responsive */
|
|
/* increase target width to give more horizontal space */
|
|
width: min(1400px, 98vw);
|
|
max-width: 98vw;
|
|
min-width: 680px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.title-with-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
.title-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.add-field-row {
|
|
padding: 0 1rem 0.5rem 1rem;
|
|
}
|
|
.add-field-controls {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
.add-field-controls input {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
/* Override global small max-width for floating cards for this metadata modal */
|
|
.card.floating.metadata-card {
|
|
/* remove the global max-width:25em constraint */
|
|
max-width: none !important;
|
|
width: min(1400px, 98vw) !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
}
|
|
.metadata-field {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.metadata-title {
|
|
margin: 0.25rem 0;
|
|
}
|
|
.metadata-current {
|
|
color: var(--color-muted, #666);
|
|
margin: 0.25rem 0 0.5rem 0;
|
|
}
|
|
.metadata-edit {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
.metadata-edit input {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.metadata-table-wrapper {
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
padding: 0 1rem; /* add horizontal padding so left column isn't flush to modal edge */
|
|
}
|
|
.metadata-table {
|
|
border-collapse: separate;
|
|
width: auto; /* allow table to size to content */
|
|
/* allow a comfortable minimum width for readable columns on very large screens
|
|
but let it shrink responsively in smaller viewports */
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
table-layout: auto;
|
|
border-spacing: 0;
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.metadata-table td, .metadata-table th { word-break: break-word; }
|
|
.metadata-table th,
|
|
.metadata-table td {
|
|
border: none;
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* Header styling: subtle background and divider */
|
|
.metadata-table thead {
|
|
background: rgba(0,0,0,0.04);
|
|
}
|
|
.metadata-table thead th {
|
|
border-bottom: 1px solid rgba(0,0,0,0.08);
|
|
}
|
|
|
|
/* extra left padding for the first column so labels don't touch the modal edge */
|
|
.metadata-table td:first-child,
|
|
.metadata-table th:first-child,
|
|
.metadata-title {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
/* Use CSS Grid per row so columns adapt to content without one taking all space */
|
|
.metadata-table thead tr,
|
|
.metadata-table tbody tr {
|
|
display: grid;
|
|
/* Fix column widths to prevent jitter when a cell contains very long content.
|
|
First column (labels) is fixed; current/new columns are flexible with a comfortable minimum. */
|
|
grid-template-columns: 220px minmax(280px, 1fr) minmax(280px, 1fr);
|
|
gap: 1rem;
|
|
align-items: start;
|
|
}
|
|
.metadata-table thead tr {
|
|
border-bottom: none;
|
|
}
|
|
.metadata-table thead th,
|
|
.metadata-table tbody td {
|
|
display: block; /* make cells behave as grid items */
|
|
}
|
|
.metadata-table thead th { font-weight: 600; }
|
|
|
|
/* column sizing helpers */
|
|
.metadata-table .col-label { width: 1%; }
|
|
.metadata-table .col-current { width: auto; }
|
|
.metadata-table .col-new { width: auto; }
|
|
.metadata-edit-cell input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0,0,0,0.12);
|
|
padding: 0.5rem 0.6rem;
|
|
}
|
|
|
|
/* Ensure long labels wrap inside the first column without expanding it */
|
|
.metadata-title strong {
|
|
display: block;
|
|
word-break: break-word;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* Row aesthetics: zebra striping and hover */
|
|
.metadata-table tbody tr {
|
|
border-top: 1px solid rgba(0,0,0,0.06);
|
|
border-bottom: 1px solid rgba(0,0,0,0.06);
|
|
}
|
|
.metadata-table tbody tr:nth-child(odd) {
|
|
background: rgba(0,0,0,0.02);
|
|
}
|
|
.metadata-table tbody tr:hover {
|
|
background: rgba(0,0,0,0.04);
|
|
}
|
|
|
|
/* Subtle vertical separators between columns */
|
|
.metadata-table tbody td:not(:last-child) {
|
|
border-right: 1px solid rgba(0,0,0,0.06);
|
|
}
|
|
|
|
/* On small screens, stack rows to improve readability */
|
|
@media (max-width: 640px) {
|
|
.metadata-table {
|
|
min-width: 0;
|
|
}
|
|
.metadata-table thead {
|
|
display: none;
|
|
}
|
|
.metadata-table tr {
|
|
display: block;
|
|
margin-bottom: 0.75rem;
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
padding: 0.75rem;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
}
|
|
.metadata-table td {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.25rem 0;
|
|
}
|
|
.metadata-title {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
/* On medium screens allow a comfortable min width; on very large screens keep roomy layout */
|
|
@media (min-width: 1200px) {
|
|
.metadata-table {
|
|
min-width: 100ch;
|
|
}
|
|
}
|
|
|
|
/* Make sure table cells wrap content and images don't overflow */
|
|
.metadata-table td, .metadata-table th {
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
hyphens: auto;
|
|
}
|
|
.metadata-table img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
.cover-preview {
|
|
max-width: 160px;
|
|
max-height: 160px;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
|
|
}
|
|
.metadata-muted { color: var(--color-muted, #666); font-size: 0.9em; }
|
|
.metadata-current-row td {
|
|
color: var(--color-muted, #666);
|
|
}
|
|
.metadata-edit-row td {
|
|
background: rgba(0,0,0,0.02);
|
|
}
|
|
</style>
|