Merged filters into new settings dialog, added experimental summary field.

assets/components/releases/release.vue

@@ -85,7 +85,7 @@
 				<span class="row-label">Part of</span>
 
 				<div class="movies">
-					<router-link
+					<RouterLink
 						v-for="movie in [...release.movies, ...release.series]"
 						:key="`movie-${movie.id}`"
 						:to="{ name: movie.type || 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
@@ -98,7 +98,7 @@
 							:src="getPath(movie.covers[0] || movie.poster, 'thumbnail')"
 							class="movie-cover"
 						>
-					</router-link>
+					</RouterLink>
 				</div>
 			</div>
 
@@ -113,12 +113,12 @@
 			>
 				<span class="row-label">Director</span>
 
-				<router-link
+				<RouterLink
 					v-for="director in release.directors"
 					:key="`director-${director.id}`"
 					class="link director"
 					:to="`/director/${director.id}/${director.slug}`"
-				>{{ director.name }}</router-link>
+				>{{ director.name }}</RouterLink>
 			</div>
 
 			<div
@@ -162,10 +162,10 @@
 				>
 					<span class="row-label">Studio</span>
 
-					<router-link
+					<RouterLink
 						:to="`/studio/${release.studio.slug}`"
 						class="link studio"
-					>{{ release.studio.name }}</router-link>
+					>{{ release.studio.name }}</RouterLink>
 				</div>
 
 				<div
@@ -227,17 +227,40 @@
 			<div class="row">
 				<span class="row-label">Added</span>
 
-				<router-link
+				<RouterLink
 					:to="`/added/${formatDate(release.createdAt, 'YYYY/MM/DD')}`"
 					:title="`Added on ${formatDate(release.createdAt, 'MMMM D, YYYY HH:mm')}`"
 					class="link added"
-				>{{ release.createdBatchId }}: {{ formatDate(release.createdAt, 'MMMM D, YYYY HH:mm') }}</router-link>
+				>{{ release.createdBatchId }}: {{ formatDate(release.createdAt, 'MMMM D, YYYY HH:mm') }}</RouterLink>
+			</div>
+
+			<div class="row">
+				<span class="row-label">Summary</span>
+
+				<div class="summary">
+					<input
+						ref="summary"
+						v-model="summary"
+						class="input"
+						@focus="selectSummary"
+					>
+
+					<button
+						v-if="hasClipboard"
+						type="button"
+						class="button button-secondary"
+						:disabled="summaryCopied"
+						@focus="copySummary"
+					>{{ summaryCopied ? 'Copied!' : 'Copy' }}</button>
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
+import formatSummary from '../../js/utils/format-summary';
+
 import Details from './details.vue';
 import Banner from './banner.vue';
 import StashButton from '../stashes/button.vue';
@@ -266,6 +289,7 @@ async function fetchRelease(scroll = true) {
 	}
 
 	this.stashedBy = this.release.stashes;
+	this.setSummary();
 }
 
 async function stashScene(stashId) {
@@ -288,6 +312,37 @@ function me() {
 	return this.$store.state.auth.user;
 }
 
+function setSummary() {
+	// this.summary = `${this.release.entity.name} - ${this.release.title} (${this.release.actors.map((actor) => actor.name).join(', ')}, ${this.formatDate(this.release.date, 'DD-MM-YYYY')})`;
+	const simpleRelease = {
+		channel: this.release.entity.name,
+		network: this.release.entity.parent?.name || this.release.entity.name,
+		title: this.release.title,
+		movie: this.release.movies?.[0]?.title,
+		actors: this.release.actors.map((actor) => actor.name),
+		tags: this.release.tags.map((tag) => tag.name),
+		date: this.release.date,
+	};
+
+	this.summary = formatSummary(simpleRelease, this.$store.state.ui.summaryFormat);
+}
+
+async function selectSummary() {
+	this.$refs.summary.select();
+}
+
+async function copySummary() {
+	const { state } = await navigator.permissions.query({ name: 'clipboard-write' });
+
+	if (state === 'granted' || state === 'prompt') {
+		await navigator.clipboard.writeText(this.summary);
+
+		this.summaryCopied = true;
+
+		setTimeout(() => { this.summaryCopied = false; }, 1000);
+	}
+}
+
 function bannerBackground() {
 	return (this.release.poster && this.getBgPath(this.release.poster, 'thumbnail'))
 		|| (this.release.covers.length > 0 && this.getBgPath(this.release.covers[0], 'thumbnail'));
@@ -318,7 +373,10 @@ export default {
 	data() {
 		return {
 			release: null,
+			summary: null,
+			summaryCopied: false,
 			stashedBy: [],
+			hasClipboard: !!navigator?.clipboard?.writeText,
 		};
 	},
 	computed: {
@@ -332,6 +390,9 @@ export default {
 	},
 	mounted: fetchRelease,
 	methods: {
+		copySummary,
+		selectSummary,
+		setSummary,
 		fetchRelease,
 		stashScene,
 		unstashScene,
@@ -502,6 +563,18 @@ export default {
 	margin: 0 0 -.15rem .1rem;
 }
 
+.summary {
+	display: flex;
+
+	.input {
+		flex-grow: 1;
+	}
+
+	.button {
+		width: 4rem;
+	}
+}
+
 .link {
     display: inline-flex;
     color: var(--link);