merge: upstream

packages/frontend/src/boot/common.ts

@@ -3,28 +3,25 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { computed, createApp, watch, markRaw, version as vueVersion, defineAsyncComponent, App } from 'vue';
+import { computed, watch, version as vueVersion, App } from 'vue';
 import { compareVersions } from 'compare-versions';
 import widgets from '@/widgets/index.js';
 import directives from '@/directives/index.js';
 import components from '@/components/index.js';
-import { version, ui, lang, updateLocale } from '@/config.js';
+import { version, lang, updateLocale, locale } from '@/config.js';
 import { applyTheme } from '@/scripts/theme.js';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode.js';
-import { i18n, updateI18n } from '@/i18n.js';
-import { confirm, alert, post, popup, toast } from '@/os.js';
-import { $i, refreshAccount, login, updateAccount, signout } from '@/account.js';
+import { updateI18n } from '@/i18n.js';
+import { $i, refreshAccount, login } from '@/account.js';
 import { defaultStore, ColdDeviceStorage } from '@/store.js';
 import { fetchInstance, instance } from '@/instance.js';
 import { deviceKind } from '@/scripts/device-kind.js';
 import { reloadChannel } from '@/scripts/unison-reload.js';
-import { reactionPicker } from '@/scripts/reaction-picker.js';
 import { getUrlWithoutLoginId } from '@/scripts/login-id.js';
 import { getAccountFromId } from '@/scripts/get-account-from-id.js';
 import { deckStore } from '@/ui/deck/deck-store.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { fetchCustomEmojis } from '@/custom-emojis.js';
-import { mainRouter } from '@/router.js';
 
 export async function common(createVue: () => App<Element>) {
 	console.info(`Sharkey v${version}`);
@@ -88,7 +85,7 @@ export async function common(createVue: () => App<Element>) {
 
 	//#region Detect language & fetch translations
 	const localeVersion = miLocalStorage.getItem('localeVersion');
-	const localeOutdated = (localeVersion == null || localeVersion !== version);
+	const localeOutdated = (localeVersion == null || localeVersion !== version || locale == null);
 	if (localeOutdated) {
 		const res = await window.fetch(`/assets/locales/${lang}.${version}.json`);
 		if (res.status === 200) {
@@ -187,6 +184,12 @@ export async function common(createVue: () => App<Element>) {
 			if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON.parse(instance.defaultLightTheme));
 			if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON.parse(instance.defaultDarkTheme));
 			defaultStore.set('themeInitial', false);
+		} else {
+			if (defaultStore.state.darkMode) {
+				applyTheme(darkTheme.value);
+			} else {
+				applyTheme(lightTheme.value);
+			}
 		}
 	});
 
@@ -202,24 +205,28 @@ export async function common(createVue: () => App<Element>) {
 		}
 	}, { immediate: true });
 
-	if (defaultStore.state.keepScreenOn) {
-		if ('wakeLock' in navigator) {
+	// Keep screen on
+	const onVisibilityChange = () => document.addEventListener('visibilitychange', () => {
+		if (document.visibilityState === 'visible') {
 			try {
 				navigator.wakeLock.request('screen');
 			} catch (err) {
 				return;
 			}
-
-			document.addEventListener('visibilitychange', async () => {
-				if (document.visibilityState === 'visible') {
-					try {
-						navigator.wakeLock.request('screen');
-					} catch (err) {
-						return;
-					}
-				}
-			});
 		}
+	});
+	if (defaultStore.state.keepScreenOn && 'wakeLock' in navigator) {
+		navigator.wakeLock.request('screen')
+			.then(onVisibilityChange)
+			.catch(() => {
+				// On WebKit-based browsers, user activation is required to send wake lock request
+				// https://webkit.org/blog/13862/the-user-activation-api/
+				document.addEventListener(
+					'click',
+					() => navigator.wakeLock.request('screen').then(onVisibilityChange),
+					{ once: true },
+				);
+			});
 	}
 
 	//#region Fetch user

packages/frontend/src/boot/main-boot.ts

@@ -3,14 +3,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { computed, createApp, watch, markRaw, version as vueVersion, defineAsyncComponent } from 'vue';
+import { createApp, markRaw, defineAsyncComponent } from 'vue';
 import { common } from './common.js';
-import { version, ui, lang, updateLocale } from '@/config.js';
-import { i18n, updateI18n } from '@/i18n.js';
+import { ui } from '@/config.js';
+import { i18n } from '@/i18n.js';
 import { confirm, alert, post, popup, toast } from '@/os.js';
 import { useStream } from '@/stream.js';
 import * as sound from '@/scripts/sound.js';
-import { $i, refreshAccount, login, updateAccount, signout } from '@/account.js';
+import { $i, updateAccount, signout } from '@/account.js';
 import { defaultStore, ColdDeviceStorage } from '@/store.js';
 import { makeHotkey } from '@/scripts/hotkey.js';
 import { reactionPicker } from '@/scripts/reaction-picker.js';
@@ -19,6 +19,7 @@ import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js
 import { mainRouter } from '@/router.js';
 import { initializeSw } from '@/scripts/initialize-sw.js';
 import { deckStore } from '@/ui/deck/deck-store.js';
+import { emojiPicker } from '@/scripts/emoji-picker.js';
 
 export async function mainBoot() {
 	const { isClientUpdated } = await common(() => createApp(
@@ -30,6 +31,7 @@ export async function mainBoot() {
 	));
 
 	reactionPicker.init();
+	emojiPicker.init();
 
 	if (isClientUpdated && $i) {
 		popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed');
@@ -71,6 +73,14 @@ export async function mainBoot() {
 		},
 	};
 
+	if (defaultStore.state.enableSeasonalScreenEffect) {
+		const month = new Date().getMonth() + 1;
+		if (month === 12 || month === 1) {
+			const SnowfallEffect = (await import('@/scripts/snowfall-effect.js')).SnowfallEffect;
+			new SnowfallEffect().render();
+		}
+	}
+
 	if ($i) {
 		// only add post shortcuts if logged in
 		hotkeys['p|n'] = post;

packages/frontend/src/boot/sub-boot.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { computed, createApp, watch, markRaw, version as vueVersion, defineAsyncComponent } from 'vue';
+import { createApp, defineAsyncComponent } from 'vue';
 import { common } from './common.js';
 
 export async function subBoot() {