Hiding scene photos and trailers from guests.

assets/components/releases/banner.vue

@@ -107,6 +107,14 @@
 					</span>
 				</a>
 			</div>
+
+			<div
+				v-if="!me"
+				class="item-container item-more"
+			><router-link
+				:to="{ name: 'signup', query: { ref: $route.path } }"
+				class="link"
+			>Sign up</router-link>&nbsp;for more photos, trailers and features!</div>
 		</div>
 	</div>
 </template>
@@ -118,6 +126,10 @@ function sfw() {
 	return this.$store.state.ui.sfw;
 }
 
+function me() {
+	return this.$store.state.auth.user;
+}
+
 function poster() {
 	if (this.release.poster) {
 		return this.getPath(this.release.poster, 'thumbnail');
@@ -181,6 +193,7 @@ export default {
 		};
 	},
 	computed: {
+		me,
 		photos,
 		poster,
 		sfw,
@@ -191,10 +204,6 @@ export default {
 <style lang="scss" scoped>
 @import 'breakpoints';
 
-.media-container {
-	backdrop-filter: blur(1rem);
-}
-
 .media {
     flex-shrink: 0;
     white-space: nowrap;
@@ -204,6 +213,7 @@ export default {
 .media.center {
 	width: 1200px;
 	max-width: 100%;
+	display: flex;
 	margin: 0 auto;
 }
 
@@ -284,6 +294,22 @@ export default {
 	background-size: cover;
 }
 
+.item-more {
+	height: auto;
+	flex-grow: 1;
+	align-items: center;
+	padding: .5rem 2rem;
+	color: var(--text-light);
+	text-shadow: 0 0 3px var(--darken);
+	font-weight: bold;
+	font-size: 1rem;
+
+	.link {
+		color: inherit;
+		text-decoration: underline;
+	}
+}
+
 .trailer-container {
 	width: 32rem;
     max-width: 100%;
@@ -311,6 +337,14 @@ export default {
 }
 
 @media(max-width: $breakpoint-micro) {
+	.media.center {
+		flex-direction: column;
+	}
+
+	.item-more {
+		font-size: .9rem;
+	}
+
 	.media:not(.expanded) .item,
     .trailer-container {
 		height: 56vw; /* 16:9 ratio for full-width video */

assets/components/releases/release.vue

@@ -327,6 +327,10 @@ export default {
 .banner {
 	background-position: center;
 	background-size: cover;
+
+	::v-deep .scrollable {
+		backdrop-filter: blur(1rem);
+	}
 }
 
 .info {