assets/components/actors/actors.vue

@@ -63,7 +63,10 @@
 			:items-per-page="limit"
 		/>
 
-		<div class="tiles">
+		<div
+			v-lazy-container="{ selector: '.lazy' }"
+			class="tiles"
+		>
 			<Actor
 				v-for="actor in actors"
 				:key="`actor-${actor.id}`"

assets/components/actors/photos.vue

@@ -16,9 +16,9 @@
 		>
 			<img
 				:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-				:style="{ 'background-image': sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}` }"
+				:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
+				:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
 				:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
-				loading="lazy"
 				class="avatar photo"
 				@load="$parent.$emit('load')"
 			>
@@ -34,9 +34,9 @@
 		>
 			<img
 				:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-				:style="{ 'background-image': sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
+				:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
+				:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
 				:title="`© ${photo.credit || photo.entity.name}`"
-				loading="lazy"
 				class="photo"
 				@load="$parent.$emit('load')"
 			>
@@ -76,6 +76,9 @@ export default {
 	padding: .5rem 1rem;
 	margin: 0 1rem 0 0;
     font-size: 0;
+	overflow-x: scroll;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
 
 	&.expanded {
 		flex-wrap: wrap;
@@ -98,6 +101,10 @@ export default {
     .avatar-link {
         display: none;
     }
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
 }
 
 .photo-link {
@@ -108,7 +115,6 @@ export default {
     height: 15rem;
     box-shadow: 0 0 3px var(--darken-weak);
 	object-fit: cover;
-	background-size: cover;
 }
 
 @media(max-width: $breakpoint3) {

assets/components/actors/tile.vue

@@ -45,10 +45,9 @@
 			<div class="avatar-container">
 				<img
 					v-if="actor.avatar"
-					:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
+					:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-					:style="{ 'background-image': sfw ? `url(/img/${actor.avatar.sfw.lazy})`: `url(/img/${actor.avatar.lazy})` }"
+					:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
-					loading="lazy"
+					class="avatar lazy"
-					class="avatar"
 				>
 
 				<span
@@ -233,7 +232,6 @@ export default {
     justify-content: center;
     object-fit: cover;
     object-position: 50% 0;
-	background-size: cover;
 }
 
 .avatar-fallback {

assets/components/container/container.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="container">
+	<div
+		class="container"
+		:class="theme"
+	>
 		<Warning
 			v-if="showWarning"
 			class="warning-container"
@@ -23,10 +26,18 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
+import EventBus from '../../js/event-bus';
+
 import Warning from './warning.vue';
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
 
+function theme(state) {
+	return state.ui.theme;
+}
+
 function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
 }
@@ -38,6 +49,12 @@ async function setConsent(consent) {
 	}
 }
 
+function mounted() {
+	document.addEventListener('click', () => {
+		EventBus.$emit('blur');
+	});
+}
+
 export default {
 	components: {
 		Header,
@@ -50,6 +67,12 @@ export default {
 			showWarning: localStorage.getItem('consent') !== window.env.sessionId,
 		};
 	},
+	computed: {
+		...mapState({
+			theme,
+		}),
+	},
+	mounted,
 	methods: {
 		toggleSidebar,
 		setConsent,

assets/components/entities/entity.vue

@@ -113,7 +113,7 @@
 </template>
 
 <script>
-import { nextTick } from 'vue';
+import Vue from 'vue';
 
 import FilterBar from '../filters/filter-bar.vue';
 import Pagination from '../pagination/pagination.vue';
@@ -135,7 +135,7 @@ async function fetchEntity() {
 
 	this.pageTitle = entity.name;
 
-	nextTick(() => {
+	Vue.nextTick(() => {
 		this.$refs.content.scrollTop = 0;
 	});
 }

assets/components/filters/actor-filter.vue

@@ -1,5 +1,5 @@
 <template>
-	<Tooltip class="filter-container">
+	<v-popover class="filter-container">
 		<div class="filter">
 			<Icon icon="users" />
 
@@ -14,48 +14,46 @@
 			>Actors</div>
 		</div>
 
-		<template v-slot:tooltip>
+		<div slot="popover">
-			<div>
+			<router-link
-				<router-link
+				class="filter-clear"
-					class="filter-clear"
+				:to="{ query: { ...$route.query, actors: undefined } }"
-					:to="{ query: { ...$route.query, actors: undefined } }"
+				:class="{ active: selectedActors.length > 0 }"
-					:class="{ active: selectedActors.length > 0 }"
+			>clear all<Icon icon="cross2" /></router-link>
-				>clear all<Icon icon="cross2" /></router-link>
 
-				<ul class="filter-items nolist">
+			<ul class="filter-items nolist">
-					<li
+				<li
-						v-for="actor in availableActors"
+					v-for="actor in availableActors"
-						:key="actor.id"
+					:key="actor.id"
-						class="filter-item"
+					class="filter-item"
-						:class="{ selected: selectedActors.includes(actor.slug) }"
+					:class="{ selected: selectedActors.includes(actor.slug) }"
+				>
+					<router-link
+						:to="{ query: {
+							...$route.query,
+							actors: actor.slug,
+						}, params: { pageNumber: 1 } }"
+						class="filter-name"
+					>{{ actor.name }}</router-link>
+
+					<router-link
+						:to="{ query: { ...$route.query, ...getNewRange(actor) }, params: { pageNumber: 1 } }"
+						class="filter-include"
 					>
-						<router-link
+						<Icon
-							:to="{ query: {
+							icon="checkmark"
-								...$route.query,
+							class="filter-add"
-								actors: actor.slug,
+						/>
-							}, params: { pageNumber: 1 } }"
-							class="filter-name"
-						>{{ actor.name }}</router-link>
 
-						<router-link
+						<Icon
-							:to="{ query: { ...$route.query, ...getNewRange(actor) }, params: { pageNumber: 1 } }"
+							icon="cross2"
-							class="filter-include"
+							class="filter-remove"
-						>
+						/>
-							<Icon
+					</router-link>
-								icon="checkmark"
+				</li>
-								class="filter-add"
+			</ul>
-							/>
+		</div>
-
+	</v-popover>
-							<Icon
-								icon="cross2"
-								class="filter-remove"
-							/>
-						</router-link>
-					</li>
-				</ul>
-			</div>
-		</template>
-	</Tooltip>
 </template>
 
 <script>

assets/components/filters/channel-filter.vue

@@ -1,5 +1,5 @@
 <template>
-	<Tooltip class="filter-container">
+	<v-popover class="filter-container">
 		<div class="filter">
 			<Icon icon="antenna" />
 
@@ -14,62 +14,60 @@
 			>Channels</div>
 		</div>
 
-		<template v-slot:popover>
+		<div slot="popover">
-			<div slot="popover">
+			<router-link
-				<router-link
+				class="filter-clear"
-					class="filter-clear"
+				:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
-					:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
+				:class="{ active: selectedLength > 0 }"
-					:class="{ active: selectedLength > 0 }"
+			>clear all<Icon icon="cross2" /></router-link>
-				>clear all<Icon icon="cross2" /></router-link>
 
-				<ul class="filter-items nolist">
+			<ul class="filter-items nolist">
-					<li
+				<li
-						v-for="channel in channelsPerNetwork"
+					v-for="channel in channelsPerNetwork"
-						:key="`channel-${channel.id}`"
+					:key="`channel-${channel.id}`"
-						class="filter-item"
+					class="filter-item"
-						:class="{
+					:class="{
-							[channel.type]: true,
+						[channel.type]: true,
-							independent: channel.independent,
+						independent: channel.independent,
-							selected: channel.type === 'network' ? selectedNetworks.includes(channel.slug) : selectedChannels.includes(channel.slug),
+						selected: channel.type === 'network' ? selectedNetworks.includes(channel.slug) : selectedChannels.includes(channel.slug),
-							disabled: channel.parent && selectedNetworks.includes(channel.parent.slug),
+						disabled: channel.parent && selectedNetworks.includes(channel.parent.slug),
-						}"
+					}"
+				>
+					<router-link
+						:to="{ query: {
+							...$route.query,
+							[channel.type === 'network' ? 'networks' : 'channels']: channel.slug,
+							[channel.type === 'network' ? 'channels' : 'networks']: undefined,
+						}, params: { pageNumber: 1 } }"
+						class="filter-name"
 					>
-						<router-link
+						<img
-							:to="{ query: {
+							v-if="channel.type === 'network' || channel.independent || !channel.parent "
-								...$route.query,
+							:src="`/img/logos/${channel.slug}/favicon.png`"
-								[channel.type === 'network' ? 'networks' : 'channels']: channel.slug,
+							class="favicon"
-								[channel.type === 'network' ? 'channels' : 'networks']: undefined,
-							}, params: { pageNumber: 1 } }"
-							class="filter-name"
 						>
-							<img
-								v-if="channel.type === 'network' || channel.independent || !channel.parent "
-								:src="`/img/logos/${channel.slug}/favicon.png`"
-								class="favicon"
-							>
 
-							{{ channel.name }}
+						{{ channel.name }}
-						</router-link>
+					</router-link>
 
-						<router-link
+					<router-link
-							:to="{ query: { ...$route.query, ...getNewRange(channel) }, params: { pageNumber: 1 } }"
+						:to="{ query: { ...$route.query, ...getNewRange(channel) }, params: { pageNumber: 1 } }"
-							class="filter-include"
+						class="filter-include"
-						>
+					>
-							<Icon
+						<Icon
-								icon="checkmark"
+							icon="checkmark"
-								class="filter-add"
+							class="filter-add"
-							/>
+						/>
 
-							<Icon
+						<Icon
-								icon="cross2"
+							icon="cross2"
-								class="filter-remove"
+							class="filter-remove"
-							/>
+						/>
-						</router-link>
+					</router-link>
-					</li>
+				</li>
-				</ul>
+			</ul>
-			</div>
+		</div>
-		</template>
+	</v-popover>
-	</Tooltip>
 </template>
 
 <script>

assets/components/filters/tag-filter.vue

@@ -1,5 +1,5 @@
 <template>
-	<Tooltip class="filter-container">
+	<v-popover class="filter-container">
 		<div class="filter">
 			<Icon icon="price-tag4" />
 
@@ -14,54 +14,52 @@
 			>Tags</div>
 		</div>
 
-		<template v-slot:tooltip>
+		<div slot="popover">
-			<div>
+			<select
-				<select
+				v-model="mode"
-					v-model="mode"
+				class="filter-mode"
-					class="filter-mode"
+				@change="$router.push({ query: { ...$route.query, mode }, params: { pageNumber: 1 } })"
-					@change="$router.push({ query: { ...$route.query, mode }, params: { pageNumber: 1 } })"
+			>
+				<option value="all">match all selected</option>
+				<option value="any">match any selected</option>
+			</select>
+
+			<router-link
+				class="filter-clear"
+				:to="{ query: { ...$route.query, tags: undefined, mode: undefined } }"
+				:class="{ active: selectedTags.length > 0 }"
+			>clear all<Icon icon="cross2" /></router-link>
+
+			<ul class="filter-items nolist">
+				<li
+					v-for="tag in availableTags"
+					:key="`tag-${tag.id}`"
+					class="filter-item"
+					:class="{ selected: selectedTags.includes(tag.slug) }"
 				>
-					<option value="all">match all selected</option>
+					<router-link
-					<option value="any">match any selected</option>
+						:to="{ query: { ...$route.query, tags: tag.slug, mode }, params: { pageNumber: 1 } }"
-				</select>
+						class="filter-name"
+					>{{ tag.name }}</router-link>
 
-				<router-link
+					<router-link
-					class="filter-clear"
+						:to="{ query: { ...$route.query, ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
-					:to="{ query: { ...$route.query, tags: undefined, mode: undefined } }"
+						class="filter-include"
-					:class="{ active: selectedTags.length > 0 }"
-				>clear all<Icon icon="cross2" /></router-link>
-
-				<ul class="filter-items nolist">
-					<li
-						v-for="tag in availableTags"
-						:key="`tag-${tag.id}`"
-						class="filter-item"
-						:class="{ selected: selectedTags.includes(tag.slug) }"
 					>
-						<router-link
+						<Icon
-							:to="{ query: { ...$route.query, tags: tag.slug, mode }, params: { pageNumber: 1 } }"
+							icon="checkmark"
-							class="filter-name"
+							class="filter-add"
-						>{{ tag.name }}</router-link>
+						/>
 
-						<router-link
+						<Icon
-							:to="{ query: { ...$route.query, ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
+							icon="cross2"
-							class="filter-include"
+							class="filter-remove"
-						>
+						/>
-							<Icon
+					</router-link>
-								icon="checkmark"
+				</li>
-								class="filter-add"
+			</ul>
-							/>
+		</div>
-
+	</v-popover>
-							<Icon
-								icon="cross2"
-								class="filter-remove"
-							/>
-						</router-link>
-					</li>
-				</ul>
-			</div>
-		</template>
-	</Tooltip>
 </template>
 
 <script>

assets/components/header/header.vue

@@ -17,7 +17,6 @@
 						<router-link
 							v-slot="{ href, isActive, navigate }"
 							to="/actors"
-							custom
 						>
 							<a
 								class="nav-link"
@@ -32,7 +31,6 @@
 						<router-link
 							v-slot="{ href, isActive, navigate }"
 							to="/networks"
-							custom
 						>
 							<a
 								class="nav-link"
@@ -47,7 +45,6 @@
 						<router-link
 							v-slot="{ href, isActive, navigate }"
 							to="/tags"
-							custom
 						>
 							<a
 								class="nav-link"
@@ -62,7 +59,6 @@
 						<router-link
 							v-slot="{ href, isActive, navigate }"
 							to="/movies"
-							custom
 						>
 							<a
 								class="nav-link"
@@ -82,7 +78,7 @@
 				@click.stop="toggleSidebar"
 			><Icon icon="menu" /></div>
 
-			<Tooltip>
+			<v-popover>
 				<div class="header-account">
 					<div class="account">
 						<Icon
@@ -92,68 +88,69 @@
 					</div>
 				</div>
 
-				<template v-slot:tooltip>
+				<div
-					<div class="menu">
+					slot="popover"
-						<ul class="menu-items noselect">
+					class="menu"
-							<li class="menu-item disabled">
+				>
-								<Icon icon="enter2" />Sign in
+					<ul class="menu-items noselect">
-							</li>
+						<li class="menu-item disabled">
+							<Icon icon="enter2" />Sign in
+						</li>
 
-							<li
+						<li
-								v-show="!sfw"
+							v-show="!sfw"
-								class="menu-item"
+							class="menu-item"
-								@click="setSfw(true)"
+							@click="setSfw(true)"
-							>
+						>
-								<Icon
+							<Icon
-									icon="flower"
+								icon="flower"
-									class="toggle noselect"
+								class="toggle noselect"
-								/>Safe mode
+							/>Safe mode
-							</li>
+						</li>
 
-							<li
+						<li
-								v-show="sfw"
+							v-show="sfw"
-								class="menu-item"
+							class="menu-item"
-								@click="setSfw(false)"
+							@click="setSfw(false)"
-							>
+						>
-								<Icon
+							<Icon
-									icon="fire"
+								icon="fire"
-									class="toggle noselect"
+								class="toggle noselect"
-								/>Filth mode
+							/>Filth mode
-							</li>
+						</li>
 
-							<li
+						<li
-								v-show="theme === 'light'"
+							v-show="theme === 'light'"
-								class="menu-item"
+							class="menu-item"
-								@click="setTheme('dark')"
+							@click="setTheme('dark')"
-							>
+						>
-								<Icon
+							<Icon
-									icon="moon"
+								icon="moon"
-									class="toggle noselect"
+								class="toggle noselect"
-								/>Dark theme
+							/>Dark theme
-							</li>
+						</li>
 
-							<li
+						<li
-								v-show="theme === 'dark'"
+							v-show="theme === 'dark'"
-								class="menu-item"
+							class="menu-item"
-								@click="setTheme('light')"
+							@click="setTheme('light')"
-							>
+						>
-								<Icon
+							<Icon
-									icon="sun"
+								icon="sun"
-									class="toggle noselect"
+								class="toggle noselect"
-								/>Light theme
+							/>Light theme
-							</li>
+						</li>
 
-							<li class="menu-item">
+						<li class="menu-item">
-								<Icon icon="filter" />Filters
+							<Icon icon="filter" />Filters
-							</li>
+						</li>
-						</ul>
+					</ul>
-					</div>
+				</div>
-				</template>
+			</v-popover>
-			</Tooltip>
 
 			<Search class="search-full" />
 
-			<Tooltip
+			<v-popover
 				class="search-compact"
 				:open="searching"
 				@show="searching = true"
@@ -167,12 +164,12 @@
 				/></button>
 
 				<Search
-					slot="tooltip"
+					slot="popover"
 					:searching="searching"
 					class="compact"
 					@search="searching = false"
 				/>
-			</Tooltip>
+			</v-popover>
 		</div>
 	</header>
 </template>

assets/components/releases/media.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="media">
+	<div
+		v-lazy-container
+		class="media"
+	>
 		<div
 			v-if="release.trailer || release.teaser"
 			class="trailer-container"
@@ -30,9 +33,8 @@
 
 			<img
 				v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
-				:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
+				:data-src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
 				:alt="release.title"
-				loading="lazy"
 				class="item trailer"
 			>
 
@@ -63,11 +65,10 @@
 				rel="noopener noreferrer"
 			>
 				<img
-					:src="`/media/${cover.thumbnail}`"
+					:data-src="`/media/${cover.thumbnail}`"
-					:style="{ background: sfw ? `/media/${cover.sfw.lazy}` : `/media/${cover.lazy}` }"
+					:data-loading="`/media/${cover.lazy}`"
 					class="item cover"
-					loading="lazy"
+					@load="$parent.$emit('load')"
-					@load="$emit('load', $event)"
 				>
 			</a>
 		</template>
@@ -85,12 +86,11 @@
 				rel="noopener noreferrer"
 			>
 				<img
-					:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
+					:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-					:style="{ background: sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
+					:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
 					:alt="`Photo ${photo.index + 1}`"
-					loading="lazy"
 					class="item"
-					@load="$emit('load', $event)"
+					@load="$parent.$emit('load')"
 				>
 
 				<span
@@ -139,10 +139,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		test: {
-			type: String,
-			default: null,
-		},
 	},
 	data() {
 		return {
@@ -163,8 +159,15 @@ export default {
 .media {
     flex-shrink: 0;
     white-space: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+	scroll-behavior: smooth;
     font-size: 0;
 
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
 	&.expanded {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
@@ -246,7 +249,6 @@ export default {
 	height: 18rem;
 	max-width: 100%;
 	box-shadow: 0 0 3px var(--shadow-weak);
-	background-size: cover;
 }
 
 .trailer-container {

assets/components/releases/release.vue

@@ -11,14 +11,12 @@
 		/>
 
 		<Scroll
-			v-slot="slotProps"
 			class="scroll-light"
 			:expandable="false"
 		>
 			<Media
 				:release="release"
 				:class="{ expanded }"
-				@load="slotProps.loaded"
 			/>
 		</Scroll>
 
@@ -58,7 +56,10 @@
 			</div>
 
 			<div class="row associations">
-				<ul class="actors nolist">
+				<ul
+					v-lazy-container="{ selector: '.lazy' }"
+					class="actors nolist"
+				>
 					<li
 						v-for="actor in release.actors"
 						:key="actor.id"

assets/components/releases/releases.vue

@@ -8,6 +8,7 @@
 		<ul
 			v-if="releases.length > 0"
 			:key="sfw"
+			v-lazy-container="{ selector: '.thumbnail' }"
 			class="nolist tiles"
 		>
 			<li

assets/components/releases/scene-tile.vue

@@ -13,10 +13,10 @@
 			>
 				<img
 					v-if="release.poster"
-					:src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
+					:data-src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
+					:data-loading="sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}`"
 					:alt="release.title"
 					class="thumbnail"
-					loading="lazy"
 				>
 
 				<span
@@ -26,10 +26,10 @@
 					<img
 						v-for="cover in release.covers"
 						:key="cover.id"
-						:src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
+						:data-src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
+						:data-loading="sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}`"
 						:alt="release.title"
 						class="thumbnail cover"
-						loading="lazy"
 					>
 				</span>
 

assets/components/scroll/scroll.vue

@@ -22,12 +22,7 @@
 				@click="scroll('left')"
 			><Icon icon="arrow-left3" /></div>
 
-			<div
+			<slot />
-				ref="content"
-				class="content"
-			>
-				<slot :loaded="loaded" />
-			</div>
 
 			<div
 				v-show="enabled && !expanded"
@@ -57,35 +52,34 @@
 import Expand from '../expand/expand.vue';
 
 function updateScroll() {
-	this.scrollable = this.$refs.content.scrollWidth > this.$refs.content.clientWidth;
+	this.scrollable = this.target.scrollWidth > this.target.clientWidth;
-	this.scrollAtStart = this.$refs.content.scrollLeft === 0;
+	this.scrollAtStart = this.target.scrollLeft === 0;
-	this.scrollAtEnd = this.$refs.content.scrollWidth - this.$refs.content.clientWidth === this.$refs.content.scrollLeft;
+	this.scrollAtEnd = this.target.scrollWidth - this.target.clientWidth === this.target.scrollLeft;
 }
 
 function scroll(direction) {
 	if (direction === 'right') {
-		this.$refs.content.scrollLeft = this.$refs.content.scrollLeft + this.$refs.content.clientWidth - 100;
+		this.target.scrollLeft = this.target.scrollLeft + this.target.clientWidth - 100;
 	}
 
 	if (direction === 'left') {
-		this.$refs.content.scrollLeft = this.$refs.content.scrollLeft - this.$refs.content.clientWidth + 100;
+		this.target.scrollLeft = this.target.scrollLeft - this.target.clientWidth + 100;
 	}
 }
 
-function loaded(_event) {
-	// typically triggered by slotted component when an image loads, affecting scrollWidth
-	this.updateScroll();
-}
-
 function mounted() {
-	this.$refs.content.addEventListener('scroll', () => this.updateScroll());
+	this.target = this.$slots.default[0].elm;
+
+	this.target.addEventListener('scroll', () => this.updateScroll());
 	window.addEventListener('resize', this.updateScroll);
 
+	// typically triggered by slotted component when an image loads, affecting scrollWidth
+	this.$on('load', () => this.updateScroll());
 	this.updateScroll();
 }
 
 function beforeDestroy() {
-	this.$refs.content.removeEventListener('scroll', this.updateScroll);
+	this.target.removeEventListener('scroll', this.updateScroll);
 
 	window.removeEventListener('resize', this.updateScroll);
 }
@@ -114,6 +108,7 @@ export default {
 	},
 	data() {
 		return {
+			target: null,
 			scrollable: true,
 			scrollAtStart: true,
 			scrollAtEnd: false,
@@ -124,7 +119,6 @@ export default {
 	beforeDestroy,
 	methods: {
 		scroll,
-		loaded,
 		updateScroll,
 	},
 };
@@ -149,16 +143,6 @@ export default {
 	position: relative;
 }
 
-.content {
-	overflow-x: scroll;
-	scroll-behavior: smooth;
-	scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
 .expand-light {
 	display: none;
 }
@@ -249,14 +233,6 @@ export default {
 		display: none;
 	}
 
-	&.scroll-start {
-		left: 0;
-	}
-
-	&.scroll-end {
-		right: 0;
-	}
-
 	&:hover {
 		display: flex;
 		cursor: pointer;

assets/components/sidebar/sidebar.vue

@@ -40,7 +40,6 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/updates"
-								custom
 								@click.native="$emit('toggle', false)"
 							>
 								<a
@@ -56,7 +55,6 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/actors"
-								custom
 								@click.native="$emit('toggle', false)"
 							>
 								<a
@@ -72,7 +70,6 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/networks"
-								custom
 								@click.native="$emit('toggle', false)"
 							>
 								<a
@@ -88,7 +85,6 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/movies"
-								custom
 								@click.native="$emit('toggle', false)"
 							>
 								<a
@@ -104,7 +100,6 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/tags"
-								custom
 								@click.native="$emit('toggle', false)"
 							>
 								<a
@@ -254,7 +249,7 @@ export default {
 	fill: var(--primary);
 }
 
-:deep(.search) {
+::v-deep .search {
 	height: 3rem;
 	border-bottom: solid 1px var(--shadow-hint);
 	padding: 0;

assets/components/tags/tags.vue

@@ -9,6 +9,7 @@
 
 			<div
 				:key="sfw"
+				v-lazy-container
 				class="tiles"
 			>
 				<Tag

assets/components/tags/tile.vue

@@ -11,7 +11,6 @@
 			<img
 				v-if="!lazy && !sfw"
 				:src="`/img/${tag.poster.thumbnail}`"
-				:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
 				:title="tag.poster.comment"
 				:alt="tag.name"
 				class="poster"
@@ -20,7 +19,6 @@
 			<img
 				v-if="!lazy && sfw"
 				:src="`/img/${tag.poster.sfw.thumbnail}`"
-				:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
 				:title="tag.poster.sfw.comment"
 				:alt="tag.name"
 				class="poster"
@@ -28,21 +26,19 @@
 
 			<img
 				v-if="lazy && !sfw"
-				:src="`/img/${tag.poster.thumbnail}`"
+				:data-src="`/img/${tag.poster.thumbnail}`"
-				:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
+				:data-loading="`/img/${tag.poster.lazy}`"
 				:title="tag.poster.comment"
 				:alt="tag.name"
-				loading="lazy"
 				class="poster"
 			>
 
 			<img
 				v-if="lazy && sfw"
-				:src="`/img/${tag.poster.sfw.thumbnail}`"
+				:data-src="`/img/${tag.poster.sfw.thumbnail}`"
-				:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
+				:data-loading="`/img/${tag.poster.sfw.lazy}`"
 				:title="tag.poster.sfw.comment"
 				:alt="tag.name"
-				loading="lazy"
 				class="poster"
 			>
 		</router-link>
@@ -103,11 +99,7 @@ export default {
 }
 
 .poster {
-	display: inline-block;
     width: 100%;
-	height: 13.5rem;
-	object-fit: cover;
-	background-size: cover;
     box-shadow: 0 0 3px var(--darken-weak);
 }
 

assets/components/tooltip/tooltip.vue

@@ -1,37 +0,0 @@
-<template>
-	<div class="tooltip-container">
-		<div class="trigger">
-			<slot />
-		</div>
-
-		<teleport to="body">
-			<div class="tooltip">
-				<div class="tooltip-wrapper">
-					<slot name="tooltip" />
-				</div>
-			</div>
-		</teleport>
-	</div>
-</template>
-
-<script>
-
-</script>
-
-<style lang="scss" scoped>
-.tooltip-container {
-	position: relative;
-	font-size: 1rem;
-}
-
-.tooltip-frame {
-	position: fixed;
-}
-
-.tooltip {
-	position: absolute;
-	z-index: 10;
-	top: 2rem;
-	background: var(--background-light);
-}
-</style>

assets/css/_theme.scss

@@ -12,9 +12,6 @@ $breakpoint4: 1500px;
     --text-dark: #222;
     --text-light: #fff;
 
-    --background-light: #fff;
-    --background-dark: #222;
-
     --darken: rgba(0, 0, 0, .5);
     --darken-strong: rgba(0, 0, 0, .7);
     --darken-extreme: rgba(0, 0, 0, .9);
@@ -43,7 +40,7 @@ $breakpoint4: 1500px;
     --text: #222;
     --text-contrast: #fff;
 
-    --background: var(--background-light);
+    --background: #fff;
     --background-dim: #fafafa;
     --background-soft: #fdfdfd;
 
@@ -74,7 +71,7 @@ $breakpoint4: 1500px;
     --text: #fff;
     --text-contrast: #222;
 
-    --background: var(--background-dark);
+    --background: #222;
     --background-dim: #181818;
     --background-soft: #111;
 

assets/css/style.scss

@@ -13,10 +13,6 @@ body {
     font-family: Arial, Helvetica, sans-serif;
 }
 
-#container {
-	height: 100%;
-}
-
 .nolist {
     list-style: none;
     padding: 0;

assets/js/event-bus.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+const EventBus = new Vue();
+
+export default EventBus;

assets/js/main.js

@@ -1,4 +1,6 @@
-import { createApp, reactive } from 'vue';
+import Vue from 'vue';
+import VTooltip from 'v-tooltip';
+import VueLazyLoad from 'vue-lazyload';
 import dayjs from 'dayjs';
 
 import router from './router';
@@ -12,11 +14,9 @@ import '../css/style.scss';
 import Container from '../components/container/container.vue';
 import Icon from '../components/icon/icon.vue';
 import Footer from '../components/footer/footer.vue';
-import Tooltip from '../components/tooltip/tooltip.vue';
 
-async function init() {
+function init() {
-	const store = initStore(reactive(router));
+	const store = initStore(router);
-	const app = createApp(Container);
 
 	initUiObservers(store, router);
 
@@ -24,17 +24,10 @@ async function init() {
 		store.dispatch('setSfw', true);
 	}
 
-	app.use(store);
+	Vue.mixin({
-	app.use(router);
-
-	await router.isReady();
-
-	app.mixin({
 		components: {
 			Icon,
 			Footer,
-			Tooltip,
-			'v-popover': Tooltip,
 		},
 		watch: {
 			pageTitle(title) {
@@ -54,14 +47,23 @@ async function init() {
 		},
 	});
 
-	app.directive('tooltip', {
+	Vue.use(VTooltip, {
-		beforeMount(el, binding) {
+		popover: {
-			// console.log(binding.modifiers);
+			defaultContainer: '.container',
-			el.title = binding.value; // eslint-disable-line no-param-reassign
 		},
 	});
+	Vue.use(VueLazyLoad, {
+		throttleWait: 0,
+	});
 
-	app.mount('#container');
+	new Vue({ // eslint-disable-line no-new
+		el: '#container',
+		store,
+		router,
+		render(createElement) {
+			return createElement(Container);
+		},
+	});
 }
 
 init();

assets/js/releases/mutations.js

@@ -1 +1,14 @@
-export default {};
+import Vue from 'vue';
+
+function setCache(state, { target, releases }) {
+	Vue.set(state.cache, target, releases);
+}
+
+function deleteCache(state, target) {
+	Vue.delete(state.cache, target);
+}
+
+export default {
+	setCache,
+	deleteCache,
+};

assets/js/router.js

@@ -1,4 +1,5 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import Vue from 'vue';
+import VueRouter from 'vue-router';
 
 import Home from '../components/home/home.vue';
 import Release from '../components/releases/release.vue';
@@ -13,6 +14,8 @@ import Search from '../components/search/search.vue';
 import Stats from '../components/stats/stats.vue';
 import NotFound from '../components/errors/404.vue';
 
+Vue.use(VueRouter);
+
 const routes = [
 	{
 		path: '/',
@@ -181,15 +184,15 @@ const routes = [
 		component: NotFound,
 	},
 	{
-		path: '/:catchAll(.*)',
+		path: '*',
 		redirect: {
 			name: 'not-found',
 		},
 	},
 ];
 
-const router = createRouter({
+const router = new VueRouter({
-	history: createWebHistory(),
+	mode: 'history',
 	routes,
 });
 

assets/js/store.js

@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import Vuex from 'vuex';
 
 import initUiStore from './ui/ui';
@@ -8,6 +9,8 @@ import initActorsStore from './actors/actors';
 import initTagsStore from './tags/tags';
 
 function initStore(router) {
+	Vue.use(Vuex);
+
 	const store = new Vuex.Store();
 
 	store.registerModule('ui', initUiStore(store, router));

assets/js/ui/observers.js

@@ -1,13 +1,4 @@
 function initUiObservers(store, _router) {
-	const body = document.querySelector('body');
-
-	body.classList.add(store.state.ui.theme);
-
-	store.watch(state => state.ui.theme, (newTheme, oldTheme) => {
-		body.classList.add(newTheme);
-		body.classList.remove(oldTheme);
-	});
-
 	document.addEventListener('keypress', (event) => {
 		if (event.target.tagName === 'INPUT') {
 			return;

package.json

@@ -43,12 +43,11 @@
         "@babel/plugin-proposal-optional-chaining": "^7.8.3",
         "@babel/preset-env": "^7.8.4",
         "@babel/register": "^7.8.3",
-        "@vue/compiler-sfc": "^3.0.4",
         "autoprefixer": "^9.7.4",
         "babel-eslint": "^10.1.0",
         "babel-loader": "^8.0.6",
         "babel-preset-airbnb": "^3.3.2",
-        "css-loader": "^5.0.1",
+        "css-loader": "^2.1.1",
         "eslint": "^5.16.0",
         "eslint-config-airbnb": "^17.1.1",
         "eslint-config-airbnb-base": "^13.2.0",
@@ -58,14 +57,15 @@
         "eslint-plugin-react": "^7.18.3",
         "eslint-plugin-vue": "^6.2.1",
         "eslint-watch": "^4.0.2",
-        "mini-css-extract-plugin": "^1.3.3",
+        "mini-css-extract-plugin": "^0.7.0",
         "node-sass": "^4.13.1",
         "postcss-loader": "^3.0.0",
-        "raw-loader": "^4.0.2",
+        "raw-loader": "^2.0.0",
         "sass-loader": "^7.3.1",
         "style-loader": "^0.23.1",
-        "vue-loader": "^16.1.2",
+        "vue-loader": "^15.9.0",
-        "webpack": "^5.11.0",
+        "vue-template-compiler": "^2.6.11",
+        "webpack": "^4.41.6",
         "webpack-cli": "^3.3.11"
     },
     "dependencies": {
@@ -126,9 +126,10 @@
         "tunnel": "0.0.6",
         "url-pattern": "^1.0.3",
         "v-tooltip": "^2.0.3",
-        "vue": "^3.0.4",
+        "vue": "^2.6.11",
-        "vue-router": "^4.0.1",
+        "vue-lazyload": "^1.3.3",
-        "vuex": "^4.0.0-rc.2",
+        "vue-router": "^3.1.6",
+        "vuex": "^3.1.2",
         "winston": "^3.2.1",
         "winston-daily-rotate-file": "^4.4.2",
         "yargs": "^13.3.0"

webpack.config.js

@@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const path = require('path');
-const { VueLoaderPlugin } = require('vue-loader');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const autoprefixer = require('autoprefixer');
 
@@ -42,13 +42,7 @@ module.exports = {
 				test: /\.scss$/,
 				use: [
 					MiniCssExtractPlugin.loader,
-					{
+					'css-loader?sourceMap',
-						loader: 'css-loader',
-						options: {
-							sourceMap: true,
-							url: false,
-						},
-					},
 					{
 						loader: 'postcss-loader',
 						options: {