Make showing ads toggleable

locales/ja-JP.yml

@@ -887,6 +887,7 @@ beta: "ベータ"
 enableAutoSensitive: "自動NSFW判定"
 enableAutoSensitiveDescription: "利用可能な場合は、機械学習を利用して自動でメディアにNSFWフラグを設定します。この機能をオフにしても、インスタンスによっては自動で設定されることがあります。"
 activeEmailValidationDescription: "ユーザーのメールアドレスのバリデーションを、捨てアドかどうかや実際に通信可能かどうかなどを判定しより積極的に行います。オフにすると単に文字列として正しいかどうかのみチェックされます。"
+showAds: "広告を表示する"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"

packages/backend/migration/1657759324648-show-ads.js

@@ -0,0 +1,11 @@
+export class showAds1657759324648 {
+	name = 'showAds1657759324648'
+
+    async up(queryRunner) {
+			await queryRunner.query(`ALTER TABLE "user_profile" ADD "showAds" boolean NOT NULL DEFAULT false`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "user_profile" DROP "showAds"`);
+    }
+}

packages/client/src/components/global/ad.vue

@@ -1,6 +1,6 @@
 <template>
-<div v-if="ad" class="qiivuoyo">
-	<div v-if="!showMenu" class="main" :class="ad.place">
+<div v-if="adz" class="qiivuoyo">
+	<div v-if="!showMenu && showAds" class="main" :class="ad.place">
 		<a :href="ad.url" target="_blank">
 			<img :src="ad.imageUrl">
 			<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle"></span></button>
@@ -44,6 +44,7 @@ export default defineComponent({
 
 	setup(props) {
 		const showMenu = ref(false);
+		const showAds = ref<boolean>(defaultStore.state.showAds);
 		const toggleMenu = () => {
 			showMenu.value = !showMenu.value;
 		};
@@ -104,6 +105,7 @@ export default defineComponent({
 		return {
 			ad: chosen,
 			showMenu,
+			showAds,
 			toggleMenu,
 			host,
 			reduceFrequency,

packages/client/src/pages/settings/general.vue

@@ -39,6 +39,7 @@
 
 	<FormSection>
 		<template #label>{{ i18n.ts.appearance }}</template>
+		<FormSwitch v-model="showAds" class="_formBlock">{{ i18n.ts.showAds }}</FormSwitch>
 		<FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{ i18n.ts.disableAnimatedMfm }}</FormSwitch>
 		<FormSwitch v-model="reduceAnimation" class="_formBlock">{{ i18n.ts.reduceUiAnimation }}</FormSwitch>
 		<FormSwitch v-model="useBlurEffect" class="_formBlock">{{ i18n.ts.useBlurEffect }}</FormSwitch>
@@ -128,6 +129,7 @@ const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v =>
 const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
 const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
 const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
+const showAds = computed(defaultStore.makeGetterSetter('showAds'));
 const disableAnimatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v));
 const useOsNativeEmojis = computed(defaultStore.makeGetterSetter('useOsNativeEmojis'));
 const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
@@ -175,6 +177,7 @@ watch([
 	showGapBetweenNotesInTimeline,
 	instanceTicker,
 	overridedDeviceKind,
+	showAds,
 ], async () => {
 	await reloadAsk();
 });

packages/client/src/store.ts

@@ -63,6 +63,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: [] as string[],
 	},
+	showAds: {
+		where: 'account',
+		default: true,
+	},
 
 	menu: {
 		where: 'deviceAccount',