1.149.0

Improved tooltip behavior and styling.
Using teleport for tooltips. Moved theme class to body tag with UI observer.
2020-12-27 04:21:36 +01:00 · 2020-12-27 04:21:10 +01:00 · 2020-12-27 02:15:06 +01:00 · 2020-12-27 00:40:35 +01:00 · 2020-12-27 00:32:42 +01:00 · 2020-12-26 23:51:27 +01:00
47 changed files with 1919 additions and 1675 deletions
--- a/assets/components/actors/actors.vue
+++ b/assets/components/actors/actors.vue
@ -63,10 +63,7 @@
 			:items-per-page="limit"
 		/>

-		<div
-			v-lazy-container="{ selector: '.lazy' }"
-			class="tiles"
-		>
+		<div class="tiles">
 			<Actor
 				v-for="actor in actors"
 				:key="`actor-${actor.id}`"
--- a/assets/components/actors/photos.vue
+++ b/assets/components/actors/photos.vue
@ -16,9 +16,9 @@
 		>
 			<img
 				:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-				:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-				:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
+				:style="{ 'background-image': 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}`"
-				:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-				:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
+				:style="{ 'background-image': sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
 				:title="`© ${photo.credit || photo.entity.name}`"
+				loading="lazy"
 				class="photo"
 				@load="$parent.$emit('load')"
 			>
@ -76,9 +76,6 @@ 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;
@ -101,10 +98,6 @@ export default {
    .avatar-link {
        display: none;
    }
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
 }

 .photo-link {
@ -115,6 +108,7 @@ export default {
    height: 15rem;
    box-shadow: 0 0 3px var(--darken-weak);
 	object-fit: cover;
+	background-size: cover;
 }

@media(max-width: $breakpoint3) {
--- a/assets/components/actors/tile.vue
+++ b/assets/components/actors/tile.vue
@ -45,9 +45,10 @@
 			<div class="avatar-container">
 				<img
 					v-if="actor.avatar"
-					:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-					:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
-					class="avatar lazy"
+					: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})` }"
+					loading="lazy"
+					class="avatar"
 				>

 				<span
@ -232,6 +233,7 @@ export default {
    justify-content: center;
    object-fit: cover;
    object-position: 50% 0;
+	background-size: cover;
 }

 .avatar-fallback {
--- a/assets/components/container/container.vue
+++ b/assets/components/container/container.vue
@ -1,8 +1,5 @@
 <template>
-	<div
-		class="container"
-		:class="theme"
-	>
+	<div class="container">
 		<Warning
 			v-if="showWarning"
 			class="warning-container"
@ -26,18 +23,10 @@
 </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;
 }
@ -49,10 +38,22 @@ async function setConsent(consent) {
 	}
 }

+function blur(event) {
+	this.events.emit('blur', event);
+}
+
+function resize(event) {
+	this.events.emit('resize', event);
+}
+
 function mounted() {
-	document.addEventListener('click', () => {
-		EventBus.$emit('blur');
-	});
+	document.addEventListener('click', this.blur);
+	window.addEventListener('resize', this.resize);
+}
+
+function beforeUnmount() {
+	document.removeEventListener('click', this.blur);
+	window.removeEventListener('resize', this.resize);
 }

 export default {
@ -67,15 +68,13 @@ export default {
 			showWarning: localStorage.getItem('consent') !== window.env.sessionId,
 		};
 	},
-	computed: {
-		...mapState({
-			theme,
-		}),
-	},
 	mounted,
+	beforeUnmount,
 	methods: {
 		toggleSidebar,
 		setConsent,
+		blur,
+		resize,
 	},
 };
 </script>
--- a/assets/components/entities/entity.vue
+++ b/assets/components/entities/entity.vue
@ -113,7 +113,7 @@
 </template>

 <script>
-import Vue from 'vue';
+import { nextTick } 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;

-	Vue.nextTick(() => {
+	nextTick(() => {
 		this.$refs.content.scrollTop = 0;
 	});
 }
--- a/assets/components/filters/actor-filter.vue
+++ b/assets/components/filters/actor-filter.vue
@ -1,5 +1,5 @@
 <template>
-	<v-popover class="filter-container">
+	<Tooltip class="filter-container">
 		<div class="filter">
 			<Icon icon="users" />

@ -14,46 +14,48 @@
 			>Actors</div>
 		</div>

-		<div slot="popover">
-			<router-link
-				class="filter-clear"
-				:to="{ query: { ...$route.query, actors: undefined } }"
-				:class="{ active: selectedActors.length > 0 }"
-			>clear all<Icon icon="cross2" /></router-link>
+		<template v-slot:tooltip>
+			<div>
+				<router-link
+					class="filter-clear"
+					:to="{ query: { ...$route.query, actors: undefined } }"
+					:class="{ active: selectedActors.length > 0 }"
+				>clear all<Icon icon="cross2" /></router-link>

-			<ul class="filter-items nolist">
-				<li
-					v-for="actor in availableActors"
-					:key="actor.id"
-					class="filter-item"
-					: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"
+				<ul class="filter-items nolist">
+					<li
+						v-for="actor in availableActors"
+						:key="actor.id"
+						class="filter-item"
+						:class="{ selected: selectedActors.includes(actor.slug) }"
 					>
-						<Icon
-							icon="checkmark"
-							class="filter-add"
-						/>
+						<router-link
+							:to="{ query: {
+								...$route.query,
+								actors: actor.slug,
+							}, params: { pageNumber: 1 } }"
+							class="filter-name"
+						>{{ actor.name }}</router-link>

-						<Icon
-							icon="cross2"
-							class="filter-remove"
-						/>
-					</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
+						<router-link
+							:to="{ query: { ...$route.query, ...getNewRange(actor) }, params: { pageNumber: 1 } }"
+							class="filter-include"
+						>
+							<Icon
+								icon="checkmark"
+								class="filter-add"
+							/>
+
+							<Icon
+								icon="cross2"
+								class="filter-remove"
+							/>
+						</router-link>
+					</li>
+				</ul>
+			</div>
+		</template>
+	</Tooltip>
 </template>

 <script>
--- a/assets/components/filters/channel-filter.vue
+++ b/assets/components/filters/channel-filter.vue
@ -1,5 +1,5 @@
 <template>
-	<v-popover class="filter-container">
+	<Tooltip class="filter-container">
 		<div class="filter">
 			<Icon icon="antenna" />

@ -14,60 +14,62 @@
 			>Channels</div>
 		</div>

-		<div slot="popover">
-			<router-link
-				class="filter-clear"
-				:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
-				:class="{ active: selectedLength > 0 }"
-			>clear all<Icon icon="cross2" /></router-link>
+		<template v-slot:popover>
+			<div slot="popover">
+				<router-link
+					class="filter-clear"
+					:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
+					:class="{ active: selectedLength > 0 }"
+				>clear all<Icon icon="cross2" /></router-link>

-			<ul class="filter-items nolist">
-				<li
-					v-for="channel in channelsPerNetwork"
-					:key="`channel-${channel.id}`"
-					class="filter-item"
-					:class="{
-						[channel.type]: true,
-						independent: channel.independent,
-						selected: channel.type === 'network' ? selectedNetworks.includes(channel.slug) : selectedChannels.includes(channel.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"
+				<ul class="filter-items nolist">
+					<li
+						v-for="channel in channelsPerNetwork"
+						:key="`channel-${channel.id}`"
+						class="filter-item"
+						:class="{
+							[channel.type]: true,
+							independent: channel.independent,
+							selected: channel.type === 'network' ? selectedNetworks.includes(channel.slug) : selectedChannels.includes(channel.slug),
+							disabled: channel.parent && selectedNetworks.includes(channel.parent.slug),
+						}"
 					>
-						<img
-							v-if="channel.type === 'network' || channel.independent || !channel.parent "
-							:src="`/img/logos/${channel.slug}/favicon.png`"
-							class="favicon"
+						<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"
 						>
+							<img
+								v-if="channel.type === 'network' || channel.independent || !channel.parent "
+								:src="`/img/logos/${channel.slug}/favicon.png`"
+								class="favicon"
+							>

-						{{ channel.name }}
-					</router-link>
+							{{ channel.name }}
+						</router-link>

-					<router-link
-						:to="{ query: { ...$route.query, ...getNewRange(channel) }, params: { pageNumber: 1 } }"
-						class="filter-include"
-					>
-						<Icon
-							icon="checkmark"
-							class="filter-add"
-						/>
+						<router-link
+							:to="{ query: { ...$route.query, ...getNewRange(channel) }, params: { pageNumber: 1 } }"
+							class="filter-include"
+						>
+							<Icon
+								icon="checkmark"
+								class="filter-add"
+							/>

-						<Icon
-							icon="cross2"
-							class="filter-remove"
-						/>
-					</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
+							<Icon
+								icon="cross2"
+								class="filter-remove"
+							/>
+						</router-link>
+					</li>
+				</ul>
+			</div>
+		</template>
+	</Tooltip>
 </template>

 <script>
--- a/assets/components/filters/tag-filter.vue
+++ b/assets/components/filters/tag-filter.vue
@ -1,5 +1,5 @@
 <template>
-	<v-popover class="filter-container">
+	<Tooltip class="filter-container">
 		<div class="filter">
 			<Icon icon="price-tag4" />

@ -14,52 +14,54 @@
 			>Tags</div>
 		</div>

-		<div slot="popover">
-			<select
-				v-model="mode"
-				class="filter-mode"
-				@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) }"
+		<template v-slot:tooltip>
+			<div class="filter-options">
+				<select
+					v-model="mode"
+					class="filter-mode"
+					@change="$router.push({ query: { ...$route.query, mode }, params: { pageNumber: 1 } })"
 				>
-					<router-link
-						:to="{ query: { ...$route.query, tags: tag.slug, mode }, params: { pageNumber: 1 } }"
-						class="filter-name"
-					>{{ tag.name }}</router-link>
+					<option value="all">match all selected</option>
+					<option value="any">match any selected</option>
+				</select>

-					<router-link
-						:to="{ query: { ...$route.query, ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
-						class="filter-include"
+				<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) }"
 					>
-						<Icon
-							icon="checkmark"
-							class="filter-add"
-						/>
+						<router-link
+							:to="{ query: { ...$route.query, tags: tag.slug, mode }, params: { pageNumber: 1 } }"
+							class="filter-name"
+						>{{ tag.name }}</router-link>

-						<Icon
-							icon="cross2"
-							class="filter-remove"
-						/>
-					</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
+						<router-link
+							:to="{ query: { ...$route.query, ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
+							class="filter-include"
+						>
+							<Icon
+								icon="checkmark"
+								class="filter-add"
+							/>
+
+							<Icon
+								icon="cross2"
+								class="filter-remove"
+							/>
+						</router-link>
+					</li>
+				</ul>
+			</div>
+		</template>
+	</Tooltip>
 </template>

 <script>
@ -103,3 +105,9 @@ export default {
 	},
 };
 </script>
+
+<style lang="scss" scoped>
+.filter-options {
+	width: 15rem;
+}
+</style>
--- a/assets/components/header/header.vue
+++ b/assets/components/header/header.vue
@ -17,6 +17,7 @@
 						<router-link
 							v-slot="{ href, isActive, navigate }"
 							to="/actors"
+							custom
 						>
 							<a
 								class="nav-link"
@ -31,6 +32,7 @@
 						<router-link
 							v-slot="{ href, isActive, navigate }"
 							to="/networks"
+							custom
 						>
 							<a
 								class="nav-link"
@ -45,6 +47,7 @@
 						<router-link
 							v-slot="{ href, isActive, navigate }"
 							to="/tags"
+							custom
 						>
 							<a
 								class="nav-link"
@ -59,6 +62,7 @@
 						<router-link
 							v-slot="{ href, isActive, navigate }"
 							to="/movies"
+							custom
 						>
 							<a
 								class="nav-link"
@ -78,43 +82,84 @@
 				@click.stop="toggleSidebar"
 			><Icon icon="menu" /></div>

-			<div class="header-toggles">
-				<Icon
-					v-show="!sfw"
-					v-tooltip="'Hit S to enable safe mode'"
-					icon="flower"
-					class="toggle noselect"
-					@click.native="setSfw(true)"
-				/>
+			<Tooltip>
+				<div class="header-account">
+					<div class="account">
+						<Icon
+							icon="user3-long"
+							class="avatar"
+						/>
+					</div>
+				</div>

-				<Icon
-					v-show="sfw"
-					v-tooltip="'Hit N to disable safe mode'"
-					icon="fire"
-					class="toggle noselect"
-					@click.native="setSfw(false)"
-				/>
+				<template v-slot:tooltip>
+					<div class="menu">
+						<ul class="menu-items noselect">
+							<li
+								class="menu-item disabled"
+								@click.stop
+							>
+								<Icon icon="enter2" />Sign in
+							</li>

-				<Icon
-					v-show="theme === 'light'"
-					v-tooltip="'Hit D to use dark theme'"
-					icon="moon"
-					class="toggle noselect"
-					@click.native="setTheme('dark')"
-				/>
+							<li
+								v-show="!sfw"
+								class="menu-item"
+								@click.stop="setSfw(true)"
+							>
+								<Icon
+									icon="flower"
+									class="toggle noselect"
+								/>Safe mode
+							</li>

-				<Icon
-					v-show="theme === 'dark'"
-					v-tooltip="'Hit L to use light theme'"
-					icon="sun"
-					class="toggle noselect"
-					@click.native="setTheme('light')"
-				/>
-			</div>
+							<li
+								v-show="sfw"
+								class="menu-item"
+								@click.stop="setSfw(false)"
+							>
+								<Icon
+									icon="fire"
+									class="toggle noselect"
+								/>Filth mode
+							</li>
+
+							<li
+								v-show="theme === 'light'"
+								class="menu-item"
+								@click.stop="setTheme('dark')"
+							>
+								<Icon
+									icon="moon"
+									class="toggle noselect"
+								/>Dark theme
+							</li>
+
+							<li
+								v-show="theme === 'dark'"
+								class="menu-item"
+								@click.stop="setTheme('light')"
+							>
+								<Icon
+									icon="sun"
+									class="toggle noselect"
+								/>Light theme
+							</li>
+
+							<li
+								class="menu-item disabled"
+								@click.stop
+							>
+								<Icon icon="filter" />Filters
+							</li>
+						</ul>
+					</div>
+				</template>
+			</Tooltip>

 			<Search class="search-full" />

-			<v-popover
+			<Tooltip
 				class="search-compact"
 				:open="searching"
 				@show="searching = true"
@ -128,12 +173,12 @@
 				/></button>

 				<Search
-					slot="popover"
+					slot="tooltip"
 					:searching="searching"
 					class="compact"
 					@search="searching = false"
 				/>
-			</v-popover>
+			</Tooltip>
 		</div>
 	</header>
 </template>
@ -318,6 +363,73 @@ export default {
    }
 }

+.header-account {
+	padding: 1rem;
+
+	&:hover {
+		cursor: pointer;
+
+		.account {
+			border-color: var(--primary);
+		}
+
+		.avatar {
+			fill: var(--primary);
+		}
+	}
+}
+
+.account {
+	width: 1.25rem;
+	height: 1.25rem;
+	display: flex;
+	justify-content: center;
+	border: solid 2px var(--shadow);
+	border-radius: 1.5rem;
+	overflow: hidden;
+
+	.avatar {
+		width: 1rem;
+		height: 1rem;
+		margin: .3rem 0 0 0;
+		fill: var(--shadow);
+	}
+}
+
+.menu-items {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.menu-item {
+	display: flex;
+	padding: .75rem 1rem .75rem .75rem;
+
+	.icon {
+		fill: var(--darken);
+		margin: 0 1rem 0 0;
+	}
+
+	&.disabled {
+		color: var(--darken-weak);
+		cursor: default;
+
+		.icon {
+			fill: var(--darken-weak);
+		}
+	}
+
+	&:hover:not(.disabled) {
+		cursor: pointer;
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
 .search-compact {
    display: none;
    height: 100%;
@ -352,8 +464,8 @@ export default {
        display: flex;
    }

-    .header-toggles {
-        margin: 0;
+    .header-account {
+		padding: 1rem .5rem 1rem 1rem;
    }
 }

@ -374,16 +486,7 @@ export default {
        display: none;
    }

-	.header-toggles {
-		display: none;
-	}
-}
-
-@media(max-width: $breakpoint-micro) {
-}
-
-@media(max-width: $breakpoint-nano) {
-	.header-toggles {
+	.header-account {
 		display: none;
 	}
 }
--- a/assets/components/releases/media.vue
+++ b/assets/components/releases/media.vue
@ -1,8 +1,5 @@
 <template>
-	<div
-		v-lazy-container
-		class="media"
-	>
+	<div class="media">
 		<div
 			v-if="release.trailer || release.teaser"
 			class="trailer-container"
@ -33,8 +30,9 @@

 			<img
 				v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
-				:data-src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
+				:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
 				:alt="release.title"
+				loading="lazy"
 				class="item trailer"
 			>

@ -65,10 +63,11 @@
 				rel="noopener noreferrer"
 			>
 				<img
-					:data-src="`/media/${cover.thumbnail}`"
-					:data-loading="`/media/${cover.lazy}`"
+					:src="`/media/${cover.thumbnail}`"
+					:style="{ background: sfw ? `/media/${cover.sfw.lazy}` : `/media/${cover.lazy}` }"
 					class="item cover"
-					@load="$parent.$emit('load')"
+					loading="lazy"
+					@load="$emit('load', $event)"
 				>
 			</a>
 		</template>
@ -86,11 +85,12 @@
 				rel="noopener noreferrer"
 			>
 				<img
-					:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-					:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
+					:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
+					:style="{ background: sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
 					:alt="`Photo ${photo.index + 1}`"
+					loading="lazy"
 					class="item"
-					@load="$parent.$emit('load')"
+					@load="$emit('load', $event)"
 				>

 				<span
@ -139,6 +139,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		test: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
@ -159,15 +163,8 @@ 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));
@ -249,6 +246,7 @@ export default {
 	height: 18rem;
 	max-width: 100%;
 	box-shadow: 0 0 3px var(--shadow-weak);
+	background-size: cover;
 }

 .trailer-container {
--- a/assets/components/releases/release.vue
+++ b/assets/components/releases/release.vue
@ -11,12 +11,14 @@
 		/>

 		<Scroll
+			v-slot="slotProps"
 			class="scroll-light"
 			:expandable="false"
 		>
 			<Media
 				:release="release"
 				:class="{ expanded }"
+				@load="slotProps.loaded"
 			/>
 		</Scroll>

@ -56,10 +58,7 @@
 			</div>

 			<div class="row associations">
-				<ul
-					v-lazy-container="{ selector: '.lazy' }"
-					class="actors nolist"
-				>
+				<ul class="actors nolist">
 					<li
 						v-for="actor in release.actors"
 						:key="actor.id"
--- a/assets/components/releases/releases.vue
+++ b/assets/components/releases/releases.vue
@ -8,7 +8,6 @@
 		<ul
 			v-if="releases.length > 0"
 			:key="sfw"
-			v-lazy-container="{ selector: '.thumbnail' }"
 			class="nolist tiles"
 		>
 			<li
--- a/assets/components/releases/scene-tile.vue
+++ b/assets/components/releases/scene-tile.vue
@ -13,10 +13,10 @@
 			>
 				<img
 					v-if="release.poster"
-					:data-src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
-					:data-loading="sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}`"
+					:src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
 					:alt="release.title"
 					class="thumbnail"
+					loading="lazy"
 				>

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

--- a/assets/components/scroll/scroll.vue
+++ b/assets/components/scroll/scroll.vue
@ -22,7 +22,12 @@
 				@click="scroll('left')"
 			><Icon icon="arrow-left3" /></div>

-			<slot />
+			<div
+				ref="content"
+				class="content"
+			>
+				<slot :loaded="loaded" />
+			</div>

 			<div
 				v-show="enabled && !expanded"
@ -52,34 +57,35 @@
 import Expand from '../expand/expand.vue';

 function updateScroll() {
-	this.scrollable = this.target.scrollWidth > this.target.clientWidth;
-	this.scrollAtStart = this.target.scrollLeft === 0;
-	this.scrollAtEnd = this.target.scrollWidth - this.target.clientWidth === this.target.scrollLeft;
+	this.scrollable = this.$refs.content.scrollWidth > this.$refs.content.clientWidth;
+	this.scrollAtStart = this.$refs.content.scrollLeft === 0;
+	this.scrollAtEnd = this.$refs.content.scrollWidth - this.$refs.content.clientWidth === this.$refs.content.scrollLeft;
 }

 function scroll(direction) {
 	if (direction === 'right') {
-		this.target.scrollLeft = this.target.scrollLeft + this.target.clientWidth - 100;
+		this.$refs.content.scrollLeft = this.$refs.content.scrollLeft + this.$refs.content.clientWidth - 100;
 	}

 	if (direction === 'left') {
-		this.target.scrollLeft = this.target.scrollLeft - this.target.clientWidth + 100;
+		this.$refs.content.scrollLeft = this.$refs.content.scrollLeft - this.$refs.content.clientWidth + 100;
 	}
 }

-function mounted() {
-	this.target = this.$slots.default[0].elm;
+function loaded(_event) {
+	// typically triggered by slotted component when an image loads, affecting scrollWidth
+	this.updateScroll();
+}

-	this.target.addEventListener('scroll', () => this.updateScroll());
+function mounted() {
+	this.$refs.content.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.target.removeEventListener('scroll', this.updateScroll);
+	this.$refs.content.removeEventListener('scroll', this.updateScroll);

 	window.removeEventListener('resize', this.updateScroll);
 }
@ -108,7 +114,6 @@ export default {
 	},
 	data() {
 		return {
-			target: null,
 			scrollable: true,
 			scrollAtStart: true,
 			scrollAtEnd: false,
@ -119,6 +124,7 @@ export default {
 	beforeDestroy,
 	methods: {
 		scroll,
+		loaded,
 		updateScroll,
 	},
 };
@ -143,6 +149,16 @@ export default {
 	position: relative;
 }

+.content {
+	overflow-x: scroll;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
 .expand-light {
 	display: none;
 }
@ -233,6 +249,14 @@ export default {
 		display: none;
 	}

+	&.scroll-start {
+		left: 0;
+	}
+
+	&.scroll-end {
+		right: 0;
+	}
+
 	&:hover {
 		display: flex;
 		cursor: pointer;
--- a/assets/components/sidebar/sidebar.vue
+++ b/assets/components/sidebar/sidebar.vue
@ -40,6 +40,7 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/updates"
+								custom
 								@click.native="$emit('toggle', false)"
 							>
 								<a
@ -55,6 +56,7 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/actors"
+								custom
 								@click.native="$emit('toggle', false)"
 							>
 								<a
@ -70,6 +72,7 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/networks"
+								custom
 								@click.native="$emit('toggle', false)"
 							>
 								<a
@ -85,6 +88,7 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/movies"
+								custom
 								@click.native="$emit('toggle', false)"
 							>
 								<a
@ -100,6 +104,7 @@
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/tags"
+								custom
 								@click.native="$emit('toggle', false)"
 							>
 								<a
@ -249,7 +254,7 @@ export default {
 	fill: var(--primary);
 }

-::v-deep .search {
+:deep(.search) {
 	height: 3rem;
 	border-bottom: solid 1px var(--shadow-hint);
 	padding: 0;
--- a/assets/components/tags/tags.vue
+++ b/assets/components/tags/tags.vue
@ -9,7 +9,6 @@

 			<div
 				:key="sfw"
-				v-lazy-container
 				class="tiles"
 			>
 				<Tag
--- a/assets/components/tags/tile.vue
+++ b/assets/components/tags/tile.vue
@ -11,6 +11,7 @@
 			<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"
@ -19,6 +20,7 @@
 			<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"
@ -26,19 +28,21 @@

 			<img
 				v-if="lazy && !sfw"
-				:data-src="`/img/${tag.poster.thumbnail}`"
-				:data-loading="`/img/${tag.poster.lazy}`"
+				:src="`/img/${tag.poster.thumbnail}`"
+				:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
 				:title="tag.poster.comment"
 				:alt="tag.name"
+				loading="lazy"
 				class="poster"
 			>

 			<img
 				v-if="lazy && sfw"
-				:data-src="`/img/${tag.poster.sfw.thumbnail}`"
-				:data-loading="`/img/${tag.poster.sfw.lazy}`"
+				:src="`/img/${tag.poster.sfw.thumbnail}`"
+				:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
 				:title="tag.poster.sfw.comment"
 				:alt="tag.name"
+				loading="lazy"
 				class="poster"
 			>
 		</router-link>
@ -99,7 +103,11 @@ 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);
 }

--- a/assets/components/tooltip/tooltip.vue
+++ b/assets/components/tooltip/tooltip.vue
@ -0,0 +1,151 @@
+<template>
+	<div class="tooltip-container">
+		<div
+			ref="trigger"
+			class="trigger noselect"
+			@click.stop="toggle"
+		>
+			<slot />
+		</div>
+
+		<teleport to="body">
+			<div
+				v-if="opened"
+				ref="tooltip"
+				class="tooltip-wrapper"
+				:style="{ transform: `translate3d(${tooltipX}px, ${tooltipY}px, 0)` }"
+			>
+				<div class="tooltip-inner">
+					<div class="tooltip">
+						<slot name="tooltip" />
+					</div>
+				</div>
+			</div>
+		</teleport>
+	</div>
+</template>
+
+<script>
+import { nextTick } from 'vue';
+
+function getX(triggerBoundary, tooltipBoundary) {
+	const idealPosition = triggerBoundary.left + (triggerBoundary.width / 2) - (tooltipBoundary.width / 2);
+
+	// don't overflow left edge
+	if (idealPosition < 0) {
+		return 0;
+	}
+
+	// don't overflow right edge
+	if (idealPosition + tooltipBoundary.width > window.innerWidth) {
+		return window.innerWidth - tooltipBoundary.width;
+	}
+
+	// position at the center of trigger
+	return idealPosition;
+}
+
+async function calculate() {
+	if (!this.opened) {
+		return;
+	}
+
+	const triggerBoundary = this.$refs.trigger.getBoundingClientRect();
+	const tooltipBoundary = this.$refs.tooltip.getBoundingClientRect();
+
+	this.tooltipY = triggerBoundary.top + triggerBoundary.height;
+	this.tooltipX = this.getX(triggerBoundary, tooltipBoundary);
+}
+
+async function open() {
+	this.events.emit('blur');
+
+	await nextTick();
+
+	this.opened = true;
+	await nextTick();
+
+	this.calculate();
+}
+
+function close() {
+	this.opened = false;
+
+	this.tooltipY = 0;
+	this.tooltipX = 0;
+}
+
+function toggle() {
+	if (this.opened) {
+		this.close();
+		return;
+	}
+
+	this.open();
+}
+
+function mounted() {
+	this.events.on('blur', () => {
+		this.close();
+	});
+
+	this.events.on('resize', () => {
+		this.calculate();
+	});
+}
+
+export default {
+	data() {
+		return {
+			opened: false,
+			tooltipX: 0,
+			tooltipY: 0,
+		};
+	},
+	mounted,
+	methods: {
+		calculate,
+		getX,
+		open,
+		close,
+		toggle,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.tooltip-wrapper {
+	display: flex;
+	top: 0;
+	left: 0;
+	flex-direction: column;
+	justify-content: center;
+	position: absolute;
+	z-index: 10;
+}
+
+.tooltip-inner {
+	position: relative;
+	box-shadow: 0 0 3px var(--darken-weak);
+
+	&:after {
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		z-index : 11;
+		top: -.5rem;
+		left: calc(50% - .5rem);
+		border-left: .5rem solid transparent;
+		border-right: .5rem solid transparent;
+		border-bottom: .5rem solid var(--background-light);
+		margin: 0 auto;
+		filter: drop-shadow(0 0 3px var(--darken-weak));
+	}
+}
+
+.tooltip {
+	position: relative;
+	background: var(--background-light);
+}
+</style>
--- a/assets/css/_theme.scss
+++ b/assets/css/_theme.scss
@ -12,6 +12,9 @@ $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);
@ -40,7 +43,7 @@ $breakpoint4: 1500px;
    --text: #222;
    --text-contrast: #fff;

-    --background: #fff;
+    --background: var(--background-light);
    --background-dim: #fafafa;
    --background-soft: #fdfdfd;

@ -71,7 +74,7 @@ $breakpoint4: 1500px;
    --text: #fff;
    --text-contrast: #222;

-    --background: #222;
+    --background: var(--background-dark);
    --background-dim: #181818;
    --background-soft: #111;

--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@ -13,6 +13,10 @@ body {
    font-family: Arial, Helvetica, sans-serif;
 }

+#container {
+	height: 100%;
+}
+
 .nolist {
    list-style: none;
    padding: 0;
--- a/assets/img/icons/enter.svg
+++ b/assets/img/icons/enter.svg
@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>enter</title>
+<path d="M7 13l4.5-4.5-4.5-4.5v3h-7v3h7v3z"></path>
+<path d="M15 16h-11v-2h10v-11h-10v-2h11c0.552 0 1 0.448 1 1v13c0 0.552-0.448 1-1 1z"></path>
+</svg>
--- a/assets/img/icons/enter2.svg
+++ b/assets/img/icons/enter2.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>enter2</title>
+<path d="M15 0v16h-12v-5h1v3h7v-12h-7v3h-1v-5zM6 9h-6v-2h6v-3l4 4-4 4z"></path>
+</svg>
--- a/assets/img/icons/enter3.svg
+++ b/assets/img/icons/enter3.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>enter3</title>
+<path d="M6 8h-5v-2h5v-2l3 3-3 3zM16 0v13l-6 3v-3h-6v-4h1v3h5v-9l4-2h-9v4h-1v-5z"></path>
+</svg>
--- a/assets/img/icons/exit.svg
+++ b/assets/img/icons/exit.svg
@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>exit</title>
+<path d="M11 13l4.5-4.5-4.5-4.5v3h-7v3h7v3z"></path>
+<path d="M1 1h11v2h-10v11h10v2h-11c-0.552 0-1-0.448-1-1v-13c0-0.552 0.448-1 1-1z"></path>
+</svg>
--- a/assets/img/icons/exit2.svg
+++ b/assets/img/icons/exit2.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>exit2</title>
+<path d="M12 9h-7v-2h7v-3l4 4-4 4zM10 10v6h-10v-16h10v6h-1v-4h-5v12h5v-4z"></path>
+</svg>
--- a/assets/img/icons/exit3.svg
+++ b/assets/img/icons/exit3.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>exit3</title>
+<path d="M12 10v-2h-5v-2h5v-2l3 3zM11 9v4h-5v3l-6-3v-13h11v5h-1v-4h-8l4 2v9h4v-3z"></path>
+</svg>
--- a/assets/img/icons/user-tie.svg
+++ b/assets/img/icons/user-tie.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>user-tie</title>
+<path d="M5 3c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3zM12.001 7h-0.553l-3.111 6.316 1.163-5.816-1.5-1.5-1.5 1.5 1.163 5.816-3.111-6.316h-0.554c-1.999 0-1.999 1.344-1.999 3v5h12v-5c0-1.656 0-3-1.999-3z"></path>
+</svg>
--- a/assets/img/icons/user3-long.svg
+++ b/assets/img/icons/user3-long.svg
@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="16"
+   height="19"
+   viewBox="0 0 16 19"
+   id="svg6">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>user3</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <title
+     id="title2">user3</title>
+  <path
+     d="M 4,4 C 4,1.791 5.791,0 8,0 10.209,0 12,1.791 12,4 12,6.209 10.209,8 8,8 5.791,8 4,6.209 4,4 Z m 8,5 H 4 C 1.791,9 0,10.791 0,13 v 6 H 16 V 13 C 16,10.791 14.209,9 12,9 Z"
+     id="path4" />
+</svg>
--- a/assets/img/icons/user3.svg
+++ b/assets/img/icons/user3.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>user3</title>
+<path d="M4 5c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM12 10h-8c-2.209 0-4 1.791-4 4v1h16v-1c0-2.209-1.791-4-4-4z"></path>
+</svg>
--- a/assets/img/icons/user7.svg
+++ b/assets/img/icons/user7.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>user7</title>
+<path d="M5 4c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3zM8 8c-3.314 0-6 3.134-6 7h2c0-2.761 1.791-5 4-5s4 2.239 4 5h2c0-3.866-2.686-7-6-7z"></path>
+</svg>
--- a/assets/img/icons/users5.svg
+++ b/assets/img/icons/users5.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>users5</title>
+<path d="M3 6c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM9 3c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM5 9c-2.761 0-5 2.686-5 6h1.5c0-0.64 0.103-1.258 0.308-1.837 0.192-0.546 0.465-1.032 0.809-1.446 0.654-0.785 1.501-1.218 2.383-1.218s1.729 0.432 2.383 1.218c0.345 0.414 0.617 0.9 0.809 1.446 0.204 0.579 0.308 1.197 0.308 1.837h1.5c0-3.314-2.239-6-5-6zM11 6c-1.472 0-2.794 0.763-3.709 1.977 0.112 0.049 0.224 0.101 0.335 0.157 0.34 0.173 0.664 0.376 0.97 0.61 0.007-0.009 0.014-0.018 0.022-0.027 0.654-0.785 1.501-1.218 2.383-1.218s1.729 0.432 2.383 1.218c0.345 0.414 0.617 0.9 0.809 1.446 0.204 0.579 0.308 1.197 0.308 1.837h1.5c0-3.314-2.239-6-5-6z"></path>
+</svg>
--- a/assets/js/event-bus.js
+++ b/assets/js/event-bus.js
@ -1,5 +0,0 @@
-import Vue from 'vue';
-
-const EventBus = new Vue();
-
-export default EventBus;
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -1,7 +1,7 @@
-import Vue from 'vue';
-import VTooltip from 'v-tooltip';
-import VueLazyLoad from 'vue-lazyload';
+import { createApp, reactive } from 'vue';
 import dayjs from 'dayjs';
+import mitt from 'mitt';
+

 import router from './router';
 import initStore from './store';
@ -14,9 +14,12 @@ 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';

-function init() {
-	const store = initStore(router);
+async function init() {
+	const store = initStore(reactive(router));
+	const app = createApp(Container);
+	const events = mitt();

 	initUiObservers(store, router);

@ -24,10 +27,22 @@ function init() {
 		store.dispatch('setSfw', true);
 	}

-	Vue.mixin({
+	app.use(store);
+	app.use(router);
+
+	await router.isReady();
+
+	app.mixin({
 		components: {
 			Icon,
 			Footer,
+			Tooltip,
+			'v-popover': Tooltip,
+		},
+		data() {
+			return {
+				events,
+			};
 		},
 		watch: {
 			pageTitle(title) {
@ -47,23 +62,14 @@ function init() {
 		},
 	});

-	Vue.use(VTooltip, {
-		popover: {
-			defaultContainer: '.container',
+	app.directive('tooltip', {
+		beforeMount(el, binding) {
+			// console.log(binding.modifiers);
+			el.title = binding.value; // eslint-disable-line no-param-reassign
 		},
 	});
-	Vue.use(VueLazyLoad, {
-		throttleWait: 0,
-	});

-	new Vue({ // eslint-disable-line no-new
-		el: '#container',
-		store,
-		router,
-		render(createElement) {
-			return createElement(Container);
-		},
-	});
+	app.mount('#container');
 }

 init();
--- a/assets/js/releases/mutations.js
+++ b/assets/js/releases/mutations.js
@ -1,14 +1 @@
-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,
-};
+export default {};
--- a/assets/js/router.js
+++ b/assets/js/router.js
@ -1,5 +1,4 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';

 import Home from '../components/home/home.vue';
 import Release from '../components/releases/release.vue';
@ -14,8 +13,6 @@ 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: '/',
@ -184,15 +181,15 @@ const routes = [
 		component: NotFound,
 	},
 	{
-		path: '*',
+		path: '/:catchAll(.*)',
 		redirect: {
 			name: 'not-found',
 		},
 	},
 ];

-const router = new VueRouter({
-	mode: 'history',
+const router = createRouter({
+	history: createWebHistory(),
 	routes,
 });

--- a/assets/js/store.js
+++ b/assets/js/store.js
@ -1,4 +1,3 @@
-import Vue from 'vue';
 import Vuex from 'vuex';

 import initUiStore from './ui/ui';
@ -9,8 +8,6 @@ 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));
--- a/assets/js/ui/observers.js
+++ b/assets/js/ui/observers.js
@ -1,4 +1,13 @@
 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;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "traxxx",
-    "version": "1.148.2",
+    "version": "1.149.0",
    "description": "All the latest porn releases in one place",
    "main": "src/app.js",
    "scripts": {
@ -43,11 +43,12 @@
        "@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": "^2.1.1",
+        "css-loader": "^5.0.1",
        "eslint": "^5.16.0",
        "eslint-config-airbnb": "^17.1.1",
        "eslint-config-airbnb-base": "^13.2.0",
@ -57,15 +58,14 @@
        "eslint-plugin-react": "^7.18.3",
        "eslint-plugin-vue": "^6.2.1",
        "eslint-watch": "^4.0.2",
-        "mini-css-extract-plugin": "^0.7.0",
+        "mini-css-extract-plugin": "^1.3.3",
        "node-sass": "^4.13.1",
        "postcss-loader": "^3.0.0",
-        "raw-loader": "^2.0.0",
+        "raw-loader": "^4.0.2",
        "sass-loader": "^7.3.1",
        "style-loader": "^0.23.1",
-        "vue-loader": "^15.9.0",
-        "vue-template-compiler": "^2.6.11",
-        "webpack": "^4.41.6",
+        "vue-loader": "^16.1.2",
+        "webpack": "^5.11.0",
        "webpack-cli": "^3.3.11"
    },
    "dependencies": {
@ -107,6 +107,7 @@
        "knex-migrate": "^1.7.4",
        "longjohn": "^0.2.12",
        "mime": "^2.4.4",
+        "mitt": "^2.1.0",
        "moment": "^2.24.0",
        "nanoid": "^2.1.11",
        "opn": "^5.5.0",
@ -126,10 +127,9 @@
        "tunnel": "0.0.6",
        "url-pattern": "^1.0.3",
        "v-tooltip": "^2.0.3",
-        "vue": "^2.6.11",
-        "vue-lazyload": "^1.3.3",
-        "vue-router": "^3.1.6",
-        "vuex": "^3.1.2",
+        "vue": "^3.0.4",
+        "vue-router": "^4.0.1",
+        "vuex": "^4.0.0-rc.2",
        "winston": "^3.2.1",
        "winston-daily-rotate-file": "^4.4.2",
        "yargs": "^13.3.0"
--- a/public/img/tags/fake-boobs/7.jpeg
+++ b/public/img/tags/fake-boobs/7.jpeg
--- a/public/img/tags/fake-boobs/7b.jpeg
+++ b/public/img/tags/fake-boobs/7b.jpeg
--- a/public/img/tags/fake-boobs/7c.jpeg
+++ b/public/img/tags/fake-boobs/7c.jpeg
--- a/public/img/tags/fake-boobs/lazy/7.jpeg
+++ b/public/img/tags/fake-boobs/lazy/7.jpeg
--- a/public/img/tags/fake-boobs/lazy/7c.jpeg
+++ b/public/img/tags/fake-boobs/lazy/7c.jpeg
--- a/public/img/tags/fake-boobs/thumbs/7.jpeg
+++ b/public/img/tags/fake-boobs/thumbs/7.jpeg
--- a/public/img/tags/fake-boobs/thumbs/7c.jpeg
+++ b/public/img/tags/fake-boobs/thumbs/7c.jpeg
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,6 +1,6 @@
 const webpack = require('webpack');
 const path = require('path');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { VueLoaderPlugin } = require('vue-loader');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const autoprefixer = require('autoprefixer');

@ -42,7 +42,13 @@ module.exports = {
 				test: /\.scss$/,
 				use: [
 					MiniCssExtractPlugin.loader,
-					'css-loader?sourceMap',
+					{
+						loader: 'css-loader',
+						options: {
+							sourceMap: true,
+							url: false,
+						},
+					},
 					{
 						loader: 'postcss-loader',
 						options: {
Author	SHA1	Message	Date
DebaucheryLibrarian	f58c07137a	1.149.0	2020-12-27 04:21:36 +01:00
DebaucheryLibrarian	a7e6f470f7	Improved tooltip behavior and styling.	2020-12-27 04:21:10 +01:00
DebaucheryLibrarian	229d74d266	Using teleport for tooltips. Moved theme class to body tag with UI observer.	2020-12-27 02:15:06 +01:00
DebaucheryLibrarian	12f247a927	Fixed double anchor tags in header and sidebar nav.	2020-12-27 00:40:35 +01:00
DebaucheryLibrarian	2e95e1e32b	Passing router as reactive object to store, so values are automatically unwrapped.	2020-12-27 00:32:42 +01:00
DebaucheryLibrarian	c503e12adb	Fixed scroll component so it uses slot props instead of the depcrecated .	2020-12-26 23:51:27 +01:00
DebaucheryLibrarian	ced8f447a7	Added tooltip menu with header toggles and upcoming filter access.	2020-12-20 23:20:41 +01:00