Ad (#7495)

* wip

* Update ad.vue

* Update default.widgets.vue

* wip

* Create 1620019354680-ad.ts

* wip

* Update ads.vue

* wip

* Update ad.vue

src/client/components/date-separated-list.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, TransitionGroup } from 'vue';
+import MkAd from '@client/components/global/ad.vue';
 
 export default defineComponent({
 	props: {
@@ -22,6 +23,11 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		ad: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 
 	methods: {
@@ -58,11 +64,7 @@ export default defineComponent({
 
 			if (
 				i != this.items.length - 1 &&
-				new Date(item.createdAt).getDate() != new Date(this.items[i + 1].createdAt).getDate() &&
-				!item._prId_ &&
-				!this.items[i + 1]._prId_ &&
-				!item._featuredId_ &&
-				!this.items[i + 1]._featuredId_
+				new Date(item.createdAt).getDate() != new Date(this.items[i + 1].createdAt).getDate()
 			) {
 				const separator = h('div', {
 					class: 'separator',
@@ -86,7 +88,15 @@ export default defineComponent({
 
 				return [el, separator];
 			} else {
-				return el;
+				if (this.ad && item._shouldInsertAd_) {
+					return [h(MkAd, {
+						class: 'ad',
+						key: item.id + ':ad',
+						prefer: 'horizontal',
+					}), el];
+				} else {
+					return el;
+				}
 			}
 		}));
 	},

src/client/components/global/ad.vue

@@ -0,0 +1,142 @@
+<template>
+<div class="qiivuoyo" v-if="ad">
+	<div class="main" :class="ad.place" v-if="!showMenu">
+		<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>
+		</a>
+	</div>
+	<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>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { instance } from '@client/instance';
+import { host } from '@client/config';
+import MkButton from '@client/components/ui/button.vue';
+
+export default defineComponent({
+	components: {
+		MkButton
+	},
+
+	props: {
+		prefer: {
+			type: String,
+			required: true
+		},
+		ad: {
+			type: Object,
+			required: false
+		},
+	},
+
+	setup(props) {
+		const showMenu = ref(false);
+		const toggleMenu = () => {
+			showMenu.value = !showMenu.value;
+		};
+
+		let ad = null;
+
+		if (props.ad) {
+			ad = props.ad;
+		} else {
+			let ads = instance.ads.filter(ad => ad.place === props.prefer);
+
+			if (ads.length === 0) {
+				ads = instance.ads.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');
+
+			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)];
+			}
+		}
+
+		return {
+			ad,
+			showMenu,
+			toggleMenu,
+			host,
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.qiivuoyo {
+	background-size: auto auto;
+	background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px );
+
+	> .main {
+		> a {
+			display: block;
+			position: relative;
+			margin: 0 auto;
+
+			> img {
+				display: block;
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+
+			> .menu {
+				position: absolute;
+				top: 0;
+				right: 0;
+				background: var(--panel);
+			}
+		}
+
+		&.square {
+			> a {
+				max-width: min(300px, 100%);
+				max-height: min(300px, 100%);
+			}
+		}
+
+		&.horizontal {
+			padding: 8px;
+
+			> a {
+				max-width: min(600px, 100%);
+				max-height: min(100px, 100%);
+			}
+		}
+
+		&.vertical {
+			> a {
+				max-width: min(100px, 100%);
+			}
+		}
+	}
+
+	> .menu {
+		padding: 8px;
+		text-align: center;
+
+		> .body {
+			padding: 8px;
+			margin: 0 auto;
+			max-width: 400px;
+			border: solid 1px var(--divider);
+		}
+	}
+}
+</style>

src/client/components/index.ts

@@ -12,8 +12,10 @@ import url from './global/url.vue';
 import i18n from './global/i18n';
 import loading from './global/loading.vue';
 import error from './global/error.vue';
+import ad from './global/ad.vue';
 
 export default function(app: App) {
+	app.component('I18n', i18n);
 	app.component('Mfm', mfm);
 	app.component('MkA', a);
 	app.component('MkAcct', acct);
@@ -25,5 +27,5 @@ export default function(app: App) {
 	app.component('MkUrl', url);
 	app.component('MkLoading', loading);
 	app.component('MkError', error);
-	app.component('I18n', i18n);
+	app.component('MkAd', ad);
 }

src/client/components/notes.vue

@@ -17,7 +17,7 @@
 			</MkButton>
 		</div>
 
-		<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap">
+		<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true">
 			<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
 		</XList>