Added movie and summary to scene page.

pages/scene/+Page.vue

@@ -27,7 +27,7 @@
 						<div class="poster-link">
 							<img
 								:src="getPath(scene.poster, 'thumbnail')"
-								:style="{ 'background-image': getPath(scene.poster, 'lazy') }"
+								:style="{ 'background-image': `url(${getPath(scene.poster, 'lazy')}` }"
 								:width="scene.poster.width"
 								:height="scene.poster.height"
 								class="poster"
@@ -170,6 +170,22 @@
 					</li>
 				</ul>
 
+				<div
+					v-if="scene.movies.length > 0"
+					class="section"
+				>
+					<h3 class="heading">Part of</h3>
+
+					<div class="movies">
+						<MovieTile
+							v-for="movie in scene.movies"
+							:key="`movie-${movie.id}`"
+							:movie="movie"
+							:details="false"
+						/>
+					</div>
+				</div>
+
 				<div
 					v-if="scene.description"
 					class="section"
@@ -223,6 +239,28 @@
 						{{ scene.comment }}
 					</div>
 				</div>
+
+				<div
+					v-if="summary"
+					class="section summary"
+				>
+					<h3 class="heading">Summary</h3>
+
+					<div class="detail">
+						<input
+							class="input"
+							:value="summary"
+							@focus="$event.target.select()"
+						>
+
+						<Icon
+							v-tooltip="'Copy to clipboard'"
+							icon="copy"
+							class="copy"
+							@click="copySummary"
+						/>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -235,15 +273,20 @@ import { formatDate, formatDuration } from '#/utils/format.js';
 import getPath from '#/src/get-path.js';
 
 import ActorTile from '#/components/actors/tile.vue';
+import MovieTile from '#/components/movies/tile.vue';
 import Player from '#/components/video/player.vue';
 import Heart from '#/components/stashes/heart.vue';
 
+import summaryTemplate from '#/assets/summary.yaml';
+
 const { pageProps } = inject('pageContext');
 const { scene } = pageProps;
 
 const playing = ref(false);
 const paused = ref(false);
 
+console.log(scene);
+
 const poster = computed(() => {
 	if (scene.poster) {
 		return getPath(scene.poster, 'thumbnail');
@@ -259,6 +302,64 @@ const poster = computed(() => {
 
 	return null;
 });
+
+const propProcessors = {
+	channel: (sceneInfo) => sceneInfo.channel?.name || sceneInfo.network?.name,
+	network: (sceneInfo) => sceneInfo.network?.name || sceneInfo.channel?.name,
+	actors: (sceneInfo) => sceneInfo.actors.map((actor) => actor.name),
+	movie: (sceneInfo) => sceneInfo.movies[0].title,
+	date: (sceneInfo, format) => formatDate(sceneInfo.effectiveDate, format),
+};
+
+function processTemplate(chain, delimit = ' ', wrapOpen = '', wrapClose = '') {
+	const results = chain.reduce((result, item) => {
+		if (typeof item === 'string') {
+			const [prop, format] = item.split('|');
+			const value = propProcessors[prop]?.(scene, format) || scene[prop];
+
+			if (Array.isArray(value)) {
+				return result.concat(value.join(format || ', '));
+			}
+
+			return result.concat(value);
+		}
+
+		if (Array.isArray(item)) {
+			const values = processTemplate(item, ', ');
+
+			return result.concat(values);
+		}
+
+		if (typeof item === 'object') {
+			const [meta, items] = Object.entries(item)[0];
+			const [delimiter, wrapStart, wrapEnd] = meta.split('|');
+			const values = processTemplate(items, delimiter, wrapStart, wrapEnd);
+
+			return result.concat(values);
+		}
+
+		return [];
+	}, []);
+
+	if (results.length > 0) {
+		return `${wrapOpen}${results.filter(Boolean).join(delimit)}${wrapClose}`;
+	}
+
+	return '';
+}
+
+const summary = (() => {
+	try {
+		return processTemplate(summaryTemplate);
+	} catch (error) {
+		console.error(`Failed to process template: ${error.message}`);
+		return null;
+	}
+})();
+
+function copySummary() {
+	navigator.clipboard.writeText(summary);
+}
 </script>
 
 <style scoped>
@@ -502,6 +603,13 @@ const poster = computed(() => {
 	}
 }
 
+.movies {
+	display: grid;
+	flex-grow: 1;
+	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	gap: .25rem;
+}
+
 .section {
 	margin-bottom: 1rem;
 }
@@ -529,6 +637,28 @@ const poster = computed(() => {
 	margin-left: .25rem;
 }
 
+.summary {
+	.detail {
+		display: flex;
+		align-items: stretch;
+	}
+
+	.input {
+		flex-grow: 1;
+	}
+
+	.icon {
+		height: auto;
+		padding: 0 .5rem 0 .75rem;
+		fill: var(--shadow);
+
+		&:hover {
+			cursor: pointer;
+			fill: var(--primary);
+		}
+	}
+}
+
 .compact-show {
 	display: none;
 }