Showing scene and channel count on entity page and tile.

assets/components/entities/entity.vue

@@ -51,7 +51,7 @@
 				>{{ tag.name }}</li>
 			</ul>
 
-			<router-link
+			<RouterLink
 				v-if="entity.parent"
 				:to="`/${entity.parent.type}/${entity.parent.slug}`"
 				class="link link-parent"
@@ -74,7 +74,7 @@
 				>{{ entity.parent.name }}</h3>
 
 				<Icon icon="device_hub" />
-			</router-link>
+			</RouterLink>
 		</div>
 
 		<div

assets/components/entities/tile.vue

@@ -4,39 +4,48 @@
 		:title="entity.name"
 		class="tile"
 	>
-		<template v-if="entity.hasLogo">
+		<div class="tile-logo">
-			<img
+			<template v-if="entity.hasLogo">
-				v-if="entity.type === 'network' || entity.independent"
+				<img
-				:src="`/img/logos/${entity.slug}/thumbs/network.png`"
+					v-if="entity.type === 'network' || entity.independent"
-				:alt="entity.name"
+					:src="`/img/logos/${entity.slug}/thumbs/network.png`"
-				loading="lazy"
+					:alt="entity.name"
-				class="logo"
+					loading="lazy"
-				@load="$emit('load', $event)"
+					class="logo"
-			>
+					@load="$emit('load', $event)"
+				>
 
-			<img
+				<img
-				v-else-if="entity.parent"
+					v-else-if="entity.parent"
-				:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
+					:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
-				:alt="entity.name"
+					:alt="entity.name"
-				loading="lazy"
+					loading="lazy"
-				class="logo"
+					class="logo"
-				@load="$emit('load', $event)"
+					@load="$emit('load', $event)"
-			>
+				>
 
-			<img
+				<img
+					v-else
+					:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
+					:alt="entity.name"
+					loading="lazy"
+					class="logo"
+					@load="$emit('load', $event)"
+				>
+			</template>
+
+			<span
 				v-else
-				:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
+				class="name"
-				:alt="entity.name"
+			>{{ entity.name }}</span>
-				loading="lazy"
+		</div>
-				class="logo"
-				@load="$emit('load', $event)"
-			>
-		</template>
 
 		<span
-			v-else
+			class="count"
-			class="name"
+		>
-		>{{ entity.name }}</span>
+			<span>{{ entity.sceneTotal }} scenes</span>
+			<span v-if="entity.type === 'network'">{{ entity.childrenTotal }} channels</span>
+		</span>
 	</router-link>
 </template>
 
@@ -59,15 +68,27 @@ export default {
     height: 100%;
     background: var(--tile);
     display: flex;
+	flex-direction: column;
     flex-shrink: 0;
 	justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    padding: .5rem 1rem;
     border-radius: .25rem;
+	position: relative;
     box-shadow: 0 0 3px rgba(0, 0, 0, .25);
     text-align: center;
     text-decoration: none;
+
+	&:hover .count {
+		color: var(--lighten);
+	}
+}
+
+.tile-logo {
+	display: flex;
+	flex-grow: 1;
+    padding: .5rem 1rem;
+	overflow: hidden;
 }
 
 .logo {
@@ -75,6 +96,7 @@ export default {
 	max-height: 100%;
     display: flex;
     align-items: center;
+	align-self: center;
 }
 
 .name {
@@ -82,4 +104,16 @@ export default {
     font-size: 1.25rem;
     font-weight: bold;
 }
+
+.count {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	box-sizing: border-box;
+	padding: .25rem .5rem;
+	border-top: solid 1px var(--lighten-hint);
+	color: var(--lighten-weak);
+	text-align: center;
+	font-size: .8rem;
+}
 </style>

assets/components/filters/filter-bar.vue

@@ -1,15 +1,20 @@
 <template>
 	<div class="filter-bar noselect">
 		<div class="sort">
-			<router-link
+			<RouterLink
 				v-for="section in ranges"
 				:key="section"
 				:to="{ params: { range: section, pageNumber: 1 }, query: $route.query }"
 				:class="{ active: $route.name === section || range === section }"
 				class="range range-button"
-			>{{ section }}</router-link>
+			>{{ section }}</RouterLink>
 		</div>
 
+		<span
+			v-if="itemsTotal && showTotal"
+			class="total"
+		>{{ itemsTotal }} <template v-if="itemsTotal === 1">scene</template><template v-else>scenes</template></span>
+
 		<div class="filters">
 			<ActorFilter
 				class="filters-filter"
@@ -78,6 +83,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		showTotal: {
+			type: Boolean,
+			default: true,
+		},
 		itemsTotal: {
 			type: Number,
 			default: 0,
@@ -240,6 +249,10 @@ export default {
 	.filters-filter:last-child .filter {
 		padding: .5rem 0 .5rem .5rem;
 	}
+
+	.total {
+		display: none;
+	}
 }
 </style>
 
@@ -351,4 +364,11 @@ export default {
 		margin: 0 1rem 0 0;
 	}
 }
+
+.total {
+	flex-shrink: 0;
+	padding: 0 1rem;
+	color: var(--shadow);
+	font-size: .8rem;
+}
 </style>

assets/components/home/home.vue

@@ -8,6 +8,7 @@
 				:items-total="totalCount"
 				:items-per-page="limit"
 				:content="$refs.content"
+				:show-total="false"
 			/>
 
 			<Releases

assets/components/releases/scene-tile.vue

@@ -113,21 +113,22 @@
 							:key="actor.id"
 							class="actor"
 						>
-							<router-link
+							<RouterLink
 								:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
+								:class="{ [actor.gender]: !!actor.gender }"
 								class="actor-link"
-							>{{ actor.name }}</router-link>
+							>{{ actor.name }}</RouterLink>
 						</li>
 					</ul>
 				</span>
 
 				<div class="labels">
-					<router-link
+					<RouterLink
 						v-if="release.shootId && release.studio"
 						:to="`/studio/${release.studio.slug}`"
 						:title="release.studio && release.studio.name"
 						class="shoot nolink"
-					>{{ release.shootId }}</router-link>
+					>{{ release.shootId }}</RouterLink>
 
 					<span
 						v-else-if="release.shootId"
@@ -145,10 +146,10 @@
 							:key="`tag-${tag.slug}`"
 							class="tag"
 						>
-							<router-link
+							<RouterLink
 								:to="`/tag/${tag.slug}`"
 								class="tag-link"
-							>{{ tag.name }}</router-link>
+							>{{ tag.name }}</RouterLink>
 						</li>
 					</ul>
 				</div>

assets/js/curate.js

@@ -117,6 +117,10 @@ function curateEntity(entity, parent, releases) {
 	if (entity.parent || parent) curatedEntity.parent = curateEntity(entity.parent || parent);
 	if (releases) curatedEntity.releases = releases.map(release => curateRelease(release));
 
+	if (entity.connection) {
+		curatedEntity.sceneTotal = entity.connection.totalCount;
+	}
+
 	return curatedEntity;
 }
 

assets/js/entities/actions.js

@@ -14,7 +14,7 @@ function initEntitiesActions(store, router) {
 	}) {
 		const { before, after, orderBy } = getDateRange(range);
 
-		const { entity, connection: { releases, totalCount } } = await graphql(`
+		const { entity } = await graphql(`
             query Entity(
                 $entitySlug: String!
                 $entityType: String! = "channel"
@@ -64,6 +64,12 @@ function initEntitiesActions(store, router) {
 							independent
 							hasLogo
 							${campaignsFragment}
+							children: childEntitiesConnection {
+								totalCount
+							}
+							connection: scenesConnection {
+								totalCount
+							}
 						}
                     }
 					${campaignsFragment}
@@ -77,82 +83,45 @@ function initEntitiesActions(store, router) {
 						hasLogo
 						${campaignsFragment}
                     }
-                }
+					connection: scenesConnection(
-				connection: releasesConnection(
+						first: $limit
-					first: $limit
+						offset: $offset
-					offset: $offset
+						orderBy: $orderBy
-					orderBy: $orderBy
+						filter: {
-					filter: {
+							or: [
-						and: [
+								{
-							{
+									date: {
-								entity: {
+										lessThan: $before,
-									or: [
+										greaterThan: $after
-										{
-											slug: { equalTo: $entitySlug }
-										},
-										{
-											parent: {
-												slug: { equalTo: $entitySlug }
-												type: { equalTo: $entityType }
-											}
-										},
-										{
-											parent: {
-												parent: {
-													slug: { equalTo: $entitySlug }
-													type: { equalTo: $entityType }
-												}
-											}
-										}
-										{
-											parent: {
-												parent: {
-													parent: {
-														slug: { equalTo: $entitySlug }
-														type: { equalTo: $entityType }
-													}
-												},
-											},
-										},
-									]
-								}
-							}
-							{
-								or: [
-									{
-										date: {
-											lessThan: $before,
-											greaterThan: $after
-										}
-									},
-									{
-										date: {
-											isNull: true
-										},
-										createdAt: {
-											lessThan: $beforeTime,
-											greaterThan: $afterTime,
-										}
 									}
-								]
+								},
-							}
+								{
-						]
+									date: {
-						releasesTagsConnection: {
+										isNull: true
-							none: {
+									},
-								tag: {
+									createdAt: {
-									slug: {
+										lessThan: $beforeTime,
-										in: $exclude
+										greaterThan: $afterTime,
+									}
+								}
+							]
+							releasesTagsConnection: {
+								none: {
+									tag: {
+										slug: {
+											in: $exclude
+										}
 									}
 								}
 							}
 						}
+					) {
+						releases: nodes {
+							${releaseFields}
+						}
+						totalCount
 					}
-				) {
+                }
-					releases: nodes {
-						${releaseFields}
-					}
-					totalCount
-				}
             }
         `, {
 			entitySlug,
@@ -175,8 +144,8 @@ function initEntitiesActions(store, router) {
 		}
 
 		return {
-			entity: curateEntity(entity, null, releases),
+			entity: curateEntity(entity, null, entity.connection.releases),
-			totalCount,
+			totalCount: entity.connection.totalCount,
 		};
 	}
 
@@ -233,6 +202,9 @@ function initEntitiesActions(store, router) {
 					children: childEntitiesConnection {
 						totalCount
 					}
+					connection: scenesConnection {
+						totalCount
+					}
                 }
             }
         `, {

migrations/20211030162955_entity_scenes.js

@@ -0,0 +1,24 @@
+exports.up = async knex => knex.raw(`
+	CREATE FUNCTION entities_scenes(entity entities) RETURNS SETOF releases AS $$
+		WITH RECURSIVE children AS (
+			SELECT entities.id
+				FROM entities
+				WHERE entities.id = entity.id
+
+				UNION ALL
+
+				SELECT entities.id
+				FROM entities
+				INNER JOIN children ON children.id = entities.parent_id
+		)
+
+		SELECT releases FROM releases
+		INNER JOIN children ON children.id = releases.entity_id;
+	$$ LANGUAGE SQL STABLE;
+
+	COMMENT ON FUNCTION entities_scenes IS E'@sortable';
+`);
+
+exports.down = async knex => knex.raw(`
+	DROP FUNCTION IF EXISTS entities_scenes;
+`);