Added actor revision overviews to actor and user pages.

components/edit/avatar.vue

@@ -0,0 +1,110 @@
+<template>
+	<div class="avatar noshrink">
+		<img
+			:src="getPath(avatar, 'thumbnail')"
+			class="avatar-image"
+		>
+
+		<span
+			class="avatar-credit"
+			title="Credit"
+		>{{ avatar.credit }}</span>
+
+		<span class="avatar-meta">
+			<span title="Dimensions">{{ avatar.width }}x{{ avatar.height }}</span>
+			<span title="Sharpness">{{ avatar.sharpness.toFixed(2) }}</span>
+		</span>
+
+		<a
+			:href="getPath(avatar)"
+			target="_blank"
+			class="avatar-zoom"
+		>
+			<Icon
+				icon="search"
+			/>
+		</a>
+	</div>
+</template>
+
+<script setup>
+import getPath from '#/src/get-path.js';
+
+defineProps({
+	avatar: {
+		type: Object,
+		default: null,
+	},
+});
+</script>
+
+<style scoped>
+.avatar {
+	display: inline-block;
+	position: relative;
+	border: solid 2px transparent;
+	border-radius: .35rem;
+	box-shadow: 0 0 3px var(--shadow-weak-10);
+	margin: 2px; /* clear outline */
+	font-size: 0;
+	overflow: hidden;
+
+	&.selected {
+		border: solid 2px var(--primary);
+	}
+
+	&:hover {
+		/*
+		.avatar-meta,
+		.avatar-credit {
+			display: none;
+		}
+		*/
+
+		.icon {
+			fill: var(--text-light);
+		}
+	}
+}
+
+.avatar-image {
+	height: 10rem;
+}
+
+.avatar-zoom {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 10;
+	padding: .25rem;
+
+	.icon {
+		fill: var(--highlight);
+	}
+}
+
+.avatar-meta,
+.avatar-credit {
+	position: absolute;
+	z-index: 10;
+	box-sizing: border-box;
+	padding: .15rem .25rem;
+	font-size: .7rem;
+	color: var(--text-light);
+	text-shadow: 1px 1px 0 var(--shadow-strong-30);
+	cursor: default;
+}
+
+.avatar-meta {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	bottom: 0;
+	left: 0;
+}
+
+.avatar-credit {
+	bottom: .75rem;
+	left: 0;
+}
+</style>

components/edit/revisions.vue

@@ -116,6 +116,12 @@
 										>{{ item.name || item.id || item }}</li>&nbsp;]
 									</ul>
 
+									<Avatar
+										v-else-if="delta.key === 'avatar'"
+										:avatar="avatarsById[rev.base[delta.key]]"
+										class="delta-avatar"
+									/>
+
 									<template v-else-if="rev.base[delta.key] instanceof Date">{{ format(rev.base[delta.key], 'yyyy-MM-dd hh:mm') }}</template>
 									<template v-else>{{ rev.base[delta.key] }}</template>
 								</span>
@@ -135,6 +141,12 @@
 										>{{ item.name || item.id || item }}</li>&nbsp;]
 									</ul>
 
+									<Avatar
+										v-else-if="delta.key === 'avatar'"
+										:avatar="avatarsById[delta.value]"
+										class="delta-avatar"
+									/>
+
 									<template v-else-if="delta.value instanceof Date">{{ format(delta.value, 'yyyy-MM-dd hh:mm') }}</template>
 									<template v-else>{{ delta.value }}</template>
 								</span>
@@ -156,7 +168,7 @@
 					@click="expanded.add(rev.id)"
 				>
 
-					<span class="rev-scene nolink noshrink"><template v-if="context !== 'scene'">{{ rev.sceneId }}</template>@{{ rev.hash.slice(0, 6) }}</span>
+					<span class="rev-scene nolink noshrink"><template v-if="context !== 'scene' && context !== 'actor'">{{ rev.sceneId || rev.actorId }}</template>@{{ rev.hash.slice(0, 6) }}</span>
 
 					<span
 						v-if="context !== 'scene'"
@@ -205,6 +217,7 @@
 import { ref, computed, inject } from 'vue';
 import { format } from 'date-fns';
 
+import Avatar from '#/components/edit/avatar.vue';
 import Checkbox from '#/components/form/checkbox.vue';
 
 import { get, post } from '#/src/api.js';
@@ -224,10 +237,12 @@ const domain = pageContext.routeParams.domain;
 const actors = ref(pageContext.pageProps.actors);
 const tags = ref(pageContext.pageProps.tags);
 const movies = ref(pageContext.pageProps.movies);
+const avatars = ref(pageContext.pageProps.avatars);
 
 const actorsById = computed(() => Object.fromEntries(actors.value.map((actor) => [actor.id, actor])));
 const tagsById = computed(() => Object.fromEntries(tags.value.map((tag) => [tag.id, tag])));
 const moviesById = computed(() => Object.fromEntries(movies.value.map((movie) => [movie.id, movie])));
+const avatarsById = computed(() => Object.fromEntries(avatars.value.map((avatar) => [avatar.id, avatar])));
 
 const feedbacks = ref({});
 const showReviewed = ref(false);
@@ -318,6 +333,7 @@ async function reloadRevisions() {
 	actors.value = updatedRevisions.actors;
 	tags.value = updatedRevisions.tags;
 	movies.value = updatedRevisions.movies;
+	avatars.value = updatedRevisions.avatars;
 	revisions.value = updatedRevisions.revisions;
 }