enhance(client): make possible to hide ads

Resolve #9590
Resolve #8996

1 files changed, 11 insertions, 1 deletions

diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
index a1ac682a45..a518484a5d 100644
--- a/packages/frontend/src/components/global/MkAd.vue
+++ b/packages/frontend/src/components/global/MkAd.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-if="chosen" :class="$style.root">
+<div v-if="chosen && !shouldHide" :class="$style.root">
 	<div v-if="!showMenu" :class="[$style.main, $style['form_' + chosen.place]]">
 		<a :href="chosen.url" target="_blank" :class="$style.link">
 			<img :src="chosen.imageUrl" :class="$style.img">
@@ -11,6 +11,7 @@
 			<div>Ads by {{ host }}</div>
 			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
 			<MkButton v-if="chosen.ratio !== 0" :class="$style.menuButton" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
+			<MkButton v-if="$i && $i.policies.canHideAds" :class="$style.menuButton" @click="hide">{{ $ts._ad.hide }}</MkButton>
 			<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
 		</div>
 	</div>
@@ -25,6 +26,7 @@ import { host } from '@/config';
 import MkButton from '@/components/MkButton.vue';
 import { defaultStore } from '@/store';
 import * as os from '@/os';
+import { $i } from '@/account';
 
 type Ad = (typeof instance)['ads'][number];
 
@@ -81,6 +83,7 @@ const choseAd = (): Ad | null => {
 };
 
 const chosen = ref(choseAd());
+let shouldHide = $ref(chosen.value && $i && $i.policies.canHideAds && defaultStore.state.hiddenAds.includes(chosen.value.id));
 
 function reduceFrequency(): void {
 	if (chosen.value == null) return;
@@ -90,6 +93,13 @@ function reduceFrequency(): void {
 	chosen.value = choseAd();
 	showMenu.value = false;
 }
+
+function hide() {
+	if (chosen.value == null) return;
+	defaultStore.push('hiddenAds', chosen.value.id);
+	os.success();
+	shouldHide = true;
+}
 </script>
 
 <style lang="scss" module>