enhance(AD): 表示される広告の選定条件を変更、縦に長いタイプを設定できるように (MisskeyIO#293)

packages/backend/src/server/api/endpoints/meta.ts

@@ -178,6 +178,7 @@ export const meta = {
 						place: {
 							type: 'string',
 							optional: false, nullable: false,
+							enum: ['square', 'horizontal', 'horizontal-big', 'vertical'],
 						},
 						ratio: {
 							type: 'number',

packages/frontend/src/components/MkDateSeparatedList.vue

@@ -95,7 +95,7 @@ export default defineComponent({
 				if (props.ad && item._shouldInsertAd_) {
 					return [h(MkAd, {
 						key: item.id + ':ad',
-						prefer: ['horizontal', 'horizontal-big'],
+						prefer: [],
 					}), el];
 				} else {
 					return el;

packages/frontend/src/components/global/MkAd.vue

@@ -63,24 +63,28 @@ const choseAd = (): Ad | null => {
 		ratio: 0,
 	} : ad);
 
-	let ads = allAds.filter(ad => props.prefer.includes(ad.place));
+	const valuableAds = allAds.filter(ad => ad.ratio !== 0);
+	const lowPriorityAds = allAds.filter(ad => ad.ratio === 0);
 
-	if (ads.length === 0) {
+	let ads: Ad[];
-		ads = allAds.filter(ad => ad.place === 'square');
+	const preferredAds = valuableAds.filter(ad => props.prefer.includes(ad.place));
+	if (preferredAds.length !== 0) {
+		ads = preferredAds;
+	} else {
+		ads = lowPriorityAds.filter(ad => props.prefer.includes(ad.place));
 	}
 
-	const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
-	ads = ads.filter(ad => ad.ratio !== 0);
-
 	if (ads.length === 0) {
-		if (lowPriorityAds.length !== 0) {
+		const nonPreferredAds = valuableAds.filter(ad => !props.prefer.includes(ad.place));
-			return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
+		if (nonPreferredAds.length !== 0) {
+			ads = nonPreferredAds;
 		} else {
-			return null;
+			ads = lowPriorityAds.filter(ad => !props.prefer.includes(ad.place));
 		}
 	}
 
 	const totalFactor = ads.reduce((a, b) => a + b.ratio, 0);
+	if (totalFactor === 0) return ads[Math.floor(Math.random() * ads.length)];
 	const r = Math.random() * totalFactor;
 
 	let stackedFactor = 0;
@@ -148,7 +152,8 @@ function reduceFrequency(): void {
 	&.form_vertical {
 		> .link,
 		> .link > .img {
-			max-width: min(100px, 100%);
+			max-width: min(300px, 100%);
+			max-height: 450px;
 		}
 	}
 }

packages/frontend/src/pages/admin/ads.vue

@@ -29,6 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<option value="square">square</option>
 					<option value="horizontal">horizontal</option>
 					<option value="horizontal-big">horizontal-big</option>
+					<option value="vertical">vertical</option>
 				</MkRadios>
 				<!--
 			<div style="margin: 32px 0;">

packages/frontend/src/pages/flash/flash.vue

@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 				<MkA v-if="$i && $i.id === flash.userId" :to="`/play/${flash.id}/edit`" style="color: var(--accent);">{{ i18n.ts._play.editThisPage }}</MkA>
-				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
+				<MkAd :prefer="['square', 'horizontal', 'horizontal-big']"/>
 			</div>
 			<MkError v-else-if="error" @retry="fetchPage()"/>
 			<MkLoading v-else/>

packages/frontend/src/pages/gallery/post.vue

@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkFollowButton v-if="!$i || $i.id != post.user.id" v-model:user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
 						</div>
 					</div>
-					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
+					<MkAd :prefer="['square', 'horizontal', 'horizontal-big']"/>
 					<MkContainer :max-height="300" :foldable="true" class="other">
 						<template #icon><i class="ti ti-clock"></i></template>
 						<template #header>{{ i18n.ts.recentPosts }}</template>

packages/frontend/src/pages/page.vue

@@ -59,7 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div><i class="ti ti-clock"></i> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
 					<div v-if="page.createdAt != page.updatedAt"><i class="ti ti-clock"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
 				</div>
-				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
+				<MkAd :prefer="['square', 'horizontal', 'horizontal-big']"/>
 				<MkContainer :max-height="300" :foldable="true" class="other">
 					<template #icon><i class="ti ti-clock"></i></template>
 					<template #header>{{ i18n.ts.recentPosts }}</template>

packages/misskey-js/src/autogen/types.ts

@@ -19119,7 +19119,7 @@ export type operations = {
             notFoundImageUrl: string | null;
             iconUrl: string | null;
             maxNoteTextLength: number;
-            ads: {
+            ads: ({
                 /**
                  * Format: id
                  * @example xxxxxxxxxx
@@ -19127,12 +19127,13 @@ export type operations = {
                 id: string;
                 /** Format: url */
                 url: string;
-                place: string;
+                /** @enum {string} */
+                place: 'square' | 'horizontal' | 'horizontal-big' | 'vertical';
                 ratio: number;
                 /** Format: url */
                 imageUrl: string;
                 dayOfWeek: number;
-              }[];
+              })[];
             /** @default 0 */
             notesPerOneAd: number;
             /** @example false */