wip

locales/ja-JP.yml

@@ -460,6 +460,8 @@ common/views/components/connect-failed.troubleshooter.vue:
   flush: "キャッシュの削除"
   set-version: "バージョン指定"
 
+
+
 common/views/components/media-banner.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
@@ -637,6 +639,17 @@ common/views/components/emoji-picker.vue:
   symbols: "記号"
   flags: "旗"
 
+common/views/components/settings/client-mode.vue:
+  title: "クライアント"
+  select-app-type: "利用するクライアントのモード"
+  choices:
+    auto: "自動で選択"
+    desktop: "デスクトップ版に固定"
+    mobile: "モバイル版に固定"
+  desktop: "デスクトップ"
+  mobile: "モバイル"
+  info: "変更はページの再度読み込み後に反映されます。"
+
 common/views/components/signin.vue:
   username: "ユーザー名"
   password: "パスワード"

src/client/app/boot.js

@@ -35,12 +35,12 @@
 	const url = new URL(location.href);
 
 	//#region Detect app name
-	let app = null;
+	var appType = null;
 
-	if (`${url.pathname}/`.startsWith('/docs/')) app = 'docs';
+	if (`${url.pathname}/`.startsWith('/docs/')) appType = 'docs';
-	if (`${url.pathname}/`.startsWith('/dev/')) app = 'dev';
+	if (`${url.pathname}/`.startsWith('/dev/')) appType = 'dev';
-	if (`${url.pathname}/`.startsWith('/auth/')) app = 'auth';
+	if (`${url.pathname}/`.startsWith('/auth/')) appType = 'auth';
-	if (`${url.pathname}/`.startsWith('/admin/')) app = 'admin';
+	if (`${url.pathname}/`.startsWith('/admin/')) appType = 'admin';
 	//#endregion
 
 	// Script version
@@ -103,15 +103,15 @@
 	}
 
 	// Switch desktop or mobile version
-	if (app == null) {
+	if (appType == null) {
-		app = isMobile ? 'mobile' : 'desktop';
+		appType = isMobile ? 'mobile' : 'desktop';
 	}
 
 	// Load an app script
 	// Note: 'async' make it possible to load the script asyncly.
 	//       'defer' make it possible to run the script when the dom loaded.
 	const script = document.createElement('script');
-	script.setAttribute('src', `/assets/${app}.${ver}.js`);
+	script.setAttribute('src', `/assets/${appType}.${ver}.js`);
 	script.setAttribute('async', 'true');
 	script.setAttribute('defer', 'true');
 	head.appendChild(script);

src/client/app/common/views/components/settings/app-type.vue

@@ -0,0 +1,40 @@
+<template>
+<ui-card>
+	<template #title><fa :icon="faMobile"/> {{ $t('title') }}</template>
+
+	<section class="fit-top">
+		<ui-select v-model="lang" :placeholder="$t('select-app-type')">
+			<option v-for="x in ['auto', 'desktop', 'mobile']" :value="x" :key="x">{{ $t(`choices.${x}`) }}</option>
+		</ui-select>
+		<ui-info>Current: <i>{{ $t(currentAppType) }}</i></ui-info>
+		<ui-info warn>{{ $t('info') }}</ui-info>
+	</section>
+</ui-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import { langs } from '../../../../config';
+import { faMobile } from '@fortawesome/free-solid-svg-icons'
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/settings/client-mode.vue'),
+
+	data() {
+		return {
+			langs,
+			currentAppType: (window as any).appType,
+
+			faMobile
+		};
+	},
+
+	computed: {
+		appTypeForce: {
+			get() { return this.$store.state.device.appTypeForce; },
+			set(value) { this.$store.commit('device/set', { key: 'appTypeForce', value }); }
+		},
+	},
+});
+</script>

src/client/app/common/views/components/settings/settings.vue

@@ -163,6 +163,7 @@
 		</ui-card>
 
 		<x-language/>
+		<x-app-type/>
 	</template>
 
 	<template v-if="page == null || page == 'notification'">
@@ -271,6 +272,7 @@ import XPassword from './password.vue';
 import XProfile from './profile.vue';
 import XApi from './api.vue';
 import XLanguage from './language.vue';
+import XAppType from './app-type.vue';
 import XNotification from './notification.vue';
 
 import { url, version } from '../../../../config';
@@ -291,6 +293,7 @@ export default Vue.extend({
 		XProfile,
 		XApi,
 		XLanguage,
+		XAppType,
 		XNotification,
 	},
 	props: {

src/client/app/store.ts

@@ -60,6 +60,7 @@ const defaultDeviceSettings = {
 	soundVolume: 0.5,
 	mediaVolume: 0.5,
 	lang: null,
+	appTypeForce: 'auto',
 	debug: false,
 	lightmode: false,
 	loadRawImages: false,