Avoid displaying the live-metrics icon if not enabled

app/Http/Resources/GalleryConfigs/InitConfig.php

@@ -83,6 +83,9 @@ class InitConfig extends Data
 	// or if they asked to hide it (because we are nice :) ).
 	public bool $is_se_info_hidden;
 
+	// Live Metrics settings
+	public bool $is_live_metrics_enabled;
+
 	public function __construct()
 	{
 		// Debug mode
@@ -174,5 +177,7 @@ private function set_supporter_properties()
 
 		// We hide the info if we are already a supporter (or the user requests it).
 		$this->is_se_info_hidden = $is_supporter || Configs::getValueAsBool('disable_se_call_for_actions');
+
+		$this->is_live_metrics_enabled = $this->is_se_enabled && Configs::getValueAsBool('live_metrics_enabled');
 	}
 }

lang/ar/statistics.php

@@ -39,6 +39,7 @@
     ],
     'metrics' => [
         'header' => '',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
         'a_visitor' => '',
         'visitors' => '',
         'visit_singular' => '',

lang/cz/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/de/statistics.php

@@ -38,6 +38,7 @@
     ],
     'metrics' => [
         'header' => 'Live-Metriken',
+        'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
         'a_visitor' => 'Ein Besucher',
         'visitors' => '%d Besucher',
         'visit_singular' => '%1$s angesehen %2$s',

lang/el/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/en/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/es/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/fr/statistics.php

@@ -39,6 +39,7 @@
     ],
     'metrics' => [
         'header' => 'Données en temps réel',
+		'preview_text' => 'Ceci est un aperçu des données en temps réel disponible dans Lychee <span class="text-primary-emphasis font-bold">SE</span>. Les données affichées ici sont générées aléatoirement et ne reflètent pas votre serveur.',
         'a_visitor' => 'Un visiteur',
         'visitors' => '%d visiteurs',
         'visit_singular' => '%1$s a vu %2$s',

lang/hu/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/it/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/ja/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/nl/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/no/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/pl/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/pt/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/ru/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/sk/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/sv/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/vi/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/zh_CN/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

lang/zh_TW/statistics.php

@@ -41,6 +41,7 @@
 	],
 	'metrics' => [
 		'header' => 'Live metrics',
+		'preview_text' => 'This is a preview of the live metrics available in Lychee <span class="text-primary-emphasis font-bold">SE</span>. The data shown here are randomly generated and do not reflect your server.',
 		'a_visitor' => 'A visitor',
 		'visitors' => '%d visitors',
 		'visit_singular' => '%1$s viewed %2$s',

resources/js/components/drawers/LiveMetrics.vue

@@ -6,10 +6,15 @@
 			</span>
 		</template>
 		<div class="flex flex-col">
+			<div class="text-sm text-muted-color-emphasis mb-8" v-if="is_se_preview_enabled" v-html="$t('statistics.metrics.preview_text')"></div>
 			<div v-for="item in prettifiedData" :key="item.action + item.ago" class="flex pt-2 pb-1">
 				<div class="flex flex-col w-full text-sm text-muted-color">
-					<router-link :to="item.link" v-if="item.count === 1" v-html="printSingular(item)"></router-link>
-					<router-link :to="item.link" v-if="item.count > 1" v-html="printPlural(item)"></router-link>
+					<router-link :to="item.link" v-if="item.count === 1" v-slot="{ href }">
+						<a :href="href" v-html="printSingular(item)"></a>
+					</router-link>
+					<router-link :to="item.link" v-if="item.count > 1" v-slot="{ href }">
+						<a :href="href" v-html="printPlural(item)"></a>
+					</router-link>
 					<span class="text-xs -mt-1">{{ item.ago }}</span>
 				</div>
 				<div class="w-12 h-12 relative shrink-0">
@@ -33,8 +38,11 @@
 	</Drawer>
 </template>
 <script setup lang="ts">
+import AlbumService from "@/services/album-service";
 import MetricsService from "@/services/metrics-service";
+import { useLycheeStateStore } from "@/stores/LycheeState";
 import { useTogglablesStateStore } from "@/stores/ModalsState";
+import { useImageHelpers } from "@/utils/Helpers";
 import { trans } from "laravel-vue-i18n";
 import { storeToRefs } from "pinia";
 import Drawer from "primevue/drawer";
@@ -43,14 +51,18 @@ import { ref } from "vue";
 import { onMounted } from "vue";
 import { watch } from "vue";
 
+const { getPlaceholderIcon } = useImageHelpers();
+
+const lycheeStore = useLycheeStateStore();
+const { is_se_preview_enabled } = storeToRefs(lycheeStore);
 const togglableStore = useTogglablesStateStore();
 const { is_metrics_open } = storeToRefs(togglableStore);
 
 type LiveMetrics = {
 	ago: string;
 	date: Date;
 	id: string;
-	link: { name: string; params: {} };
+	link: { name: string; params: { albumId: string | null; photoId: string | null } };
 	action: App.Enum.MetricsAction;
 	title: string;
 	count: number;
@@ -60,6 +72,38 @@ const data = ref<App.Http.Resources.Models.LiveMetricsResource[] | undefined>(un
 const prettifiedData = ref<LiveMetrics[] | undefined>(undefined);
 
 function load() {
+	if (is_se_preview_enabled.value) {
+		// Do not load, if the preview is enabled
+		data.value = [];
+		AlbumService.getAll()
+			.then((response) => {
+				prettifiedData.value = (response.data.albums as App.Http.Resources.Models.ThumbAlbumResource[]).map((album) => {
+					const ago = dateToAgo(album.created_at);
+					const ret: LiveMetrics = {
+						ago: ago,
+						date: new Date(album.created_at),
+						action: ["visit", "favourite", "download", "shared"].at(Math.floor(Math.random() * 4)) as App.Enum.MetricsAction,
+						title: album.title,
+						id: album.id,
+						count: Math.floor(Math.random() * 3) + 1,
+						src: album.thumb?.thumb ?? getPlaceholderIcon(),
+						link: {
+							name: "album",
+							params: {
+								albumId: album.id,
+								photoId: null,
+							},
+						},
+					};
+					return ret;
+				});
+			})
+			.catch((error) => {
+				console.error(error);
+			});
+		return;
+	}
+
 	MetricsService.get()
 		.then((response) => {
 			data.value = response.data;
@@ -170,10 +214,10 @@ function LiveMetricsToPretty(data: App.Http.Resources.Models.LiveMetricsResource
 		count: count,
 		src: data.url,
 		link: {
-			name: data.photo_id ? "photo" : "album",
+			name: "album",
 			params: {
-				albumid: data.album_id,
-				photoid: data.photo_id,
+				albumId: data.album_id,
+				photoId: data.photo_id,
 			},
 		},
 	};

resources/js/components/headers/AlbumsHeader.vue

@@ -126,7 +126,7 @@ const lycheeStore = useLycheeStateStore();
 const togglableStore = useTogglablesStateStore();
 const favourites = useFavouriteStore();
 
-const { dropbox_api_key, is_favourite_enabled } = storeToRefs(lycheeStore);
+const { dropbox_api_key, is_favourite_enabled, is_se_preview_enabled, is_live_metrics_enabled } = storeToRefs(lycheeStore);
 const { is_login_open, is_upload_visible, is_create_album_visible, is_create_tag_album_visible, is_metrics_open } = storeToRefs(togglableStore);
 
 const router = useRouter();
@@ -236,7 +236,13 @@ const menu = computed(() =>
 			icon: "pi pi-bell",
 			type: "fn",
 			callback: () => (is_metrics_open.value = true),
-			if: props.rights.can_see_live_metrics,
+			if: is_live_metrics_enabled.value && props.rights.can_see_live_metrics,
+		},
+		{
+			icon: "pi pi-bell text-primary-emphasis",
+			type: "fn",
+			callback: () => (is_metrics_open.value = true),
+			if: is_se_preview_enabled.value && props.rights.can_see_live_metrics,
 		},
 		{
 			icon: "pi pi-sign-in",

resources/js/lychee.d.ts

@@ -109,7 +109,7 @@ declare namespace App.Http.Resources.Collections {
 		id: string | null;
 		title: string | null;
 		track_url: string | null;
-		photos: App.Http.Resources.Models.PhotoResource[] | Array<any>;
+		photos: App.Http.Resources.Models.PhotoResource[];
 	};
 	export type RootAlbumResource = {
 		smart_albums: { [key: number]: App.Http.Resources.Models.ThumbAlbumResource } | Array<any>;
@@ -262,6 +262,7 @@ declare namespace App.Http.Resources.GalleryConfigs {
 		is_se_enabled: boolean;
 		is_se_preview_enabled: boolean;
 		is_se_info_hidden: boolean;
+		is_live_metrics_enabled: boolean;
 	};
 	export type LandingPageResource = {
 		landing_page_enable: boolean;
@@ -340,8 +341,8 @@ declare namespace App.Http.Resources.Models {
 		header_id: string | null;
 		parent_id: string | null;
 		has_albums: boolean;
-		albums: App.Http.Resources.Models.ThumbAlbumResource[] | Array<any>;
-		photos: App.Http.Resources.Models.PhotoResource[] | Array<any>;
+		albums: App.Http.Resources.Models.ThumbAlbumResource[];
+		photos: App.Http.Resources.Models.PhotoResource[];
 		cover_id: string | null;
 		thumb: App.Http.Resources.Models.ThumbResource | null;
 		policy: App.Http.Resources.Models.Utils.AlbumProtectionPolicy;
@@ -359,7 +360,7 @@ declare namespace App.Http.Resources.Models {
 		cat: string;
 		name: string;
 		description: string;
-		configs: App.Http.Resources.Models.ConfigResource[] | Array<any>;
+		configs: App.Http.Resources.Models.ConfigResource[];
 		priority: number;
 	};
 	export type ConfigResource = {
@@ -457,7 +458,7 @@ declare namespace App.Http.Resources.Models {
 	export type SmartAlbumResource = {
 		id: string;
 		title: string;
-		photos: App.Http.Resources.Models.PhotoResource[] | Array<any>;
+		photos: App.Http.Resources.Models.PhotoResource[];
 		thumb: App.Http.Resources.Models.ThumbResource | null;
 		policy: App.Http.Resources.Models.Utils.AlbumProtectionPolicy;
 		rights: App.Http.Resources.Rights.AlbumRightsResource;
@@ -471,7 +472,7 @@ declare namespace App.Http.Resources.Models {
 		copyright: string | null;
 		is_tag_album: boolean;
 		show_tags: Array<string>;
-		photos: App.Http.Resources.Models.PhotoResource[] | Array<any>;
+		photos: App.Http.Resources.Models.PhotoResource[];
 		thumb: App.Http.Resources.Models.ThumbResource | null;
 		policy: App.Http.Resources.Models.Utils.AlbumProtectionPolicy;
 		rights: App.Http.Resources.Rights.AlbumRightsResource;
@@ -683,8 +684,8 @@ declare namespace App.Http.Resources.Search {
 		photo_layout: App.Enum.PhotoLayoutType;
 	};
 	export type ResultsResource = {
-		albums: App.Http.Resources.Models.ThumbAlbumResource[] | Array<any>;
-		photos: App.Http.Resources.Models.PhotoResource[] | Array<any>;
+		albums: App.Http.Resources.Models.ThumbAlbumResource[];
+		photos: App.Http.Resources.Models.PhotoResource[];
 		current_page: number;
 		from: number;
 		last_page: number;
@@ -693,19 +694,6 @@ declare namespace App.Http.Resources.Search {
 		total: number;
 	};
 }
-declare namespace App.Http.Resources.Sharing {
-	export type ListedAlbumsResource = {
-		id: string;
-		title: string;
-	};
-	export type SharedAlbumResource = {
-		id: number;
-		user_id: number;
-		album_id: string;
-		username: string;
-		title: string;
-	};
-}
 declare namespace App.Http.Resources.Statistics {
 	export type Album = {
 		username: string;