3 files changed, 61 insertions, 24 deletions

diff --git a/src/client/components/global/ad.vue b/src/client/components/global/ad.vue
index f88a1d2026..8397b2229e 100644
--- a/src/client/components/global/ad.vue
+++ b/src/client/components/global/ad.vue
@@ -9,8 +9,9 @@
 	<div class="menu" v-else>
 		<div class="body">
 			<div>Ads by {{ host }}</div>
-			<!--<MkButton>{{ $ts.stopThisAd }}</MkButton>-->
-			<button class="_textButton" @click="toggleMenu">{{ $ts.close }}</button>
+			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
+			<MkButton v-if="ad.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
+			<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
 		</div>
 	</div>
 </div>
@@ -19,9 +20,11 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { instance } from '@client/instance';
+import { Instance, instance } from '@client/instance';
 import { host } from '@client/config';
 import MkButton from '@client/components/ui/button.vue';
+import { defaultStore } from '@client/store';
+import * as os from '@client/os';
 
 export default defineComponent({
 	components: {
@@ -45,35 +48,65 @@ export default defineComponent({
 			showMenu.value = !showMenu.value;
 		};
 
-		let ad = null;
+		const choseAd = (): Instance['ads'][number] | null => {
+			if (props.specify) {
+				return props.specify as Instance['ads'][number];
+			}
+
+			const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
+				...ad,
+				ratio: 0
+			} : ad);
 
-		if (props.specify) {
-			ad = props.specify;
-		} else {
-			let ads = instance.ads.filter(ad => props.prefer.includes(ad.place));
+			let ads = allAds.filter(ad => props.prefer.includes(ad.place));
 
 			if (ads.length === 0) {
-				ads = instance.ads.filter(ad => ad.place === 'square');
+				ads = allAds.filter(ad => ad.place === 'square');
 			}
 
-			const high = ads.filter(ad => ad.priority === 'high');
-			const middle = ads.filter(ad => ad.priority === 'middle');
-			const low = ads.filter(ad => ad.priority === 'low');
+			const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
+			ads = ads.filter(ad => ad.ratio !== 0);
 
-			if (high.length > 0) {
-				ad = high[Math.floor(Math.random() * high.length)];
-			} else if (middle.length > 0) {
-				ad = middle[Math.floor(Math.random() * middle.length)];
-			} else if (low.length > 0) {
-				ad = low[Math.floor(Math.random() * low.length)];
+			if (ads.length === 0) {
+				if (lowPriorityAds.length !== 0) {
+					return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
+				} else {
+					return null;
+				}
 			}
-		}
+
+			const totalFactor = ads.reduce((a, b) => a + b.ratio, 0);
+			const r = Math.random() * totalFactor;
+
+			let stackedFactor = 0;
+			for (const ad of ads) {
+				if (r >= stackedFactor && r <= stackedFactor + ad.ratio) {
+					return ad;
+				} else {
+					stackedFactor += ad.ratio;
+				}
+			}
+
+			return null;
+		};
+
+		const chosen = ref(choseAd());
+
+		const reduceFrequency = () => {
+			if (chosen.value == null) return;
+			if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
+			defaultStore.push('mutedAds', chosen.value.id);
+			os.success();
+			chosen.value = choseAd();
+			showMenu.value = false;
+		};
 
 		return {
-			ad,
+			ad: chosen,
 			showMenu,
 			toggleMenu,
 			host,
+			reduceFrequency,
 		};
 	}
 });
@@ -157,6 +190,10 @@ export default defineComponent({
 			margin: 0 auto;
 			max-width: 400px;
 			border: solid 1px var(--divider);
+
+			> .button {
+				margin: 8px auto;
+			}
 		}
 	}
 }
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 0573b2592d..267e4debd2 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -9,7 +9,6 @@
 	</div>
 </div>
 <div class="gqnyydlz" :style="{ background: color }" v-else>
-	<i class="fas fa-eye-slash" @click="hide = true"></i>
 	<a
 		:href="image.url"
 		:title="image.name"
@@ -18,6 +17,7 @@
 		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.name" :title="image.name" :cover="false"/>
 		<div class="gif" v-if="image.type === 'image/gif'">GIF</div>
 	</a>
+	<i class="fas fa-eye-slash" @click="hide = true"></i>
 </div>
 </template>
 
diff --git a/src/client/components/ui/modal.vue b/src/client/components/ui/modal.vue
index 3b11213426..2a4eec4034 100644
--- a/src/client/components/ui/modal.vue
+++ b/src/client/components/ui/modal.vue
@@ -226,12 +226,12 @@ export default defineComponent({
 
 .mk-modal {
 	> .bg {
-		z-index: 10000;
+		z-index: 20000;
 	}
 
 	> .content:not(.popup) {
 		position: fixed;
-		z-index: 10000;
+		z-index: 20000;
 		top: 0;
 		bottom: 0;
 		left: 0;
@@ -263,7 +263,7 @@ export default defineComponent({
 
 	> .content.popup {
 		position: absolute;
-		z-index: 10000;
+		z-index: 20000;
 
 		&.fixed {
 			position: fixed;