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>
 

src/client/pages/gallery/post.vue

@@ -33,6 +33,7 @@
 					<MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
 				</div>
 			</div>
+			<MkAd prefer="horizontal"/>
 			<MkContainer :max-height="300" :foldable="true" class="other">
 				<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
 				<MkPagination :pagination="otherPostsPagination" #default="{items}">

src/client/pages/instance/ads.vue

@@ -0,0 +1,125 @@
+<template>
+<div class="uqshojas">
+	<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+	<section class="_card _gap ads" v-for="ad in ads">
+		<div class="_content ad">
+			<MkAd v-if="ad.url" :ad="ad"/>
+			<MkInput v-model:value="ad.url" type="url">
+				<span>URL</span>
+			</MkInput>
+			<MkInput v-model:value="ad.imageUrl">
+				<span>{{ $ts.imageUrl }}</span>
+			</MkInput>
+			<div style="margin: 32px 0;">
+				<MkRadio v-model="ad.place" value="square">square</MkRadio>
+				<MkRadio v-model="ad.place" value="horizontal">horizontal</MkRadio>
+			</div>
+			<div style="margin: 32px 0;">
+				{{ $ts.priority }}
+				<MkRadio v-model="ad.priority" value="high">{{ $ts.high }}</MkRadio>
+				<MkRadio v-model="ad.priority" value="middle">{{ $ts.middle }}</MkRadio>
+				<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio>
+			</div>
+			<MkInput v-model:value="ad.expiresAt" type="date">
+				<span>{{ $ts.expiration }}</span>
+			</MkInput>
+			<MkTextarea v-model:value="ad.memo">
+				<span>{{ $ts.memo }}</span>
+			</MkTextarea>
+			<div class="buttons">
+				<MkButton class="button" inline @click="save(ad)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+				<MkButton class="button" inline @click="remove(ad)" danger><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
+			</div>
+		</div>
+	</section>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@client/components/ui/button.vue';
+import MkInput from '@client/components/ui/input.vue';
+import MkTextarea from '@client/components/ui/textarea.vue';
+import MkRadio from '@client/components/ui/radio.vue';
+import * as os from '@client/os';
+import * as symbols from '@client/symbols';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MkInput,
+		MkTextarea,
+		MkRadio,
+	},
+
+	emits: ['info'],
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.ads,
+				icon: 'fas fa-audio-description'
+			},
+			ads: [],
+		}
+	},
+
+	created() {
+		os.api('admin/ad/list').then(ads => {
+			this.ads = ads;
+		});
+	},
+
+	mounted() {
+		this.$emit('info', this[symbols.PAGE_INFO]);
+	},
+
+	methods: {
+		add() {
+			this.ads.unshift({
+				id: null,
+				memo: '',
+				place: 'square',
+				priority: 'middle',
+				url: '',
+				imageUrl: null,
+				expiresAt: null,
+			});
+		},
+
+		remove(ad) {
+			os.dialog({
+				type: 'warning',
+				text: this.$t('removeAreYouSure', { x: ad.url }),
+				showCancelButton: true
+			}).then(({ canceled }) => {
+				if (canceled) return;
+				this.ads = this.ads.filter(x => x != ad);
+				os.apiWithDialog('admin/ad/delete', {
+					id: ad.id
+				});
+			});
+		},
+
+		save(ad) {
+			if (ad.id == null) {
+				os.apiWithDialog('admin/ad/create', {
+					...ad,
+					expiresAt: new Date(ad.expiresAt).getTime()
+				});
+			} else {
+				os.apiWithDialog('admin/ad/update', {
+					...ad,
+					expiresAt: new Date(ad.expiresAt).getTime()
+				});
+			}
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.uqshojas {
+	margin: var(--margin);
+}
+</style>

src/client/pages/instance/index.vue

@@ -23,6 +23,7 @@
 				<FormLink :active="page === 'queue'" replace to="/instance/queue"><template #icon><i class="fas fa-clipboard-list"></i></template>{{ $ts.jobQueue }}</FormLink>
 				<FormLink :active="page === 'files'" replace to="/instance/files"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.files }}</FormLink>
 				<FormLink :active="page === 'announcements'" replace to="/instance/announcements"><template #icon><i class="fas fa-broadcast-tower"></i></template>{{ $ts.announcements }}</FormLink>
+				<FormLink :active="page === 'ads'" replace to="/instance/ads"><template #icon><i class="fas fa-audio-description"></i></template>{{ $ts.ads }}</FormLink>
 				<FormLink :active="page === 'abuses'" replace to="/instance/abuses"><template #icon><i class="fas fa-exclamation-circle"></i></template>{{ $ts.abuseReports }}</FormLink>
 			</FormGroup>
 			<FormGroup>
@@ -102,6 +103,7 @@ export default defineComponent({
 				case 'queue': return defineAsyncComponent(() => import('./queue.vue'));
 				case 'files': return defineAsyncComponent(() => import('./files.vue'));
 				case 'announcements': return defineAsyncComponent(() => import('./announcements.vue'));
+				case 'ads': return defineAsyncComponent(() => import('./ads.vue'));
 				case 'database': return defineAsyncComponent(() => import('./database.vue'));
 				case 'abuses': return defineAsyncComponent(() => import('./abuses.vue'));
 				case 'settings': return defineAsyncComponent(() => import('./settings.vue'));

src/client/pages/page.vue

@@ -45,6 +45,7 @@
 				<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
 				<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
 			</div>
+			<MkAd prefer="horizontal"/>
 			<MkContainer :max-height="300" :foldable="true" class="other">
 				<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
 				<MkPagination :pagination="otherPostsPagination" #default="{items}">

src/client/scripts/paging.ts

@@ -91,8 +91,10 @@ export default (opts) => ({
 				...params,
 				limit: this.pagination.noPaging ? (this.pagination.limit || 10) : (this.pagination.limit || 10) + 1,
 			}).then(items => {
-				for (const item of items) {
+				for (let i = 0; i < items.length; i++) {
+					const item = items[i];
 					markRaw(item);
+					if (i === 3) item._shouldInsertAd_ = true;
 				}
 				if (!this.pagination.noPaging && (items.length > (this.pagination.limit || 10))) {
 					items.pop();
@@ -128,8 +130,10 @@ export default (opts) => ({
 					untilId: this.pagination.reversed ? this.items[0].id : this.items[this.items.length - 1].id,
 				}),
 			}).then(items => {
-				for (const item of items) {
+				for (let i = 0; i < items.length; i++) {
+					const item = items[i];
 					markRaw(item);
+					if (i === 10) item._shouldInsertAd_ = true;
 				}
 				if (items.length > SECOND_FETCH_LIMIT) {
 					items.pop();

src/client/style.scss

@@ -11,6 +11,8 @@
 	@media (max-width: 500px) {
 		--margin: var(--marginHalf);
 	}
+
+	//--ad: rgb(255 169 0 / 10%);
 }
 
 ::selection {

src/client/ui/chat/date-separated-list.vue

@@ -42,11 +42,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',

src/client/ui/default.widgets.vue

@@ -1,6 +1,7 @@
 <template>
 <div class="efzpzdvf">
 	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+	<MkAd prefer="square"/>
 
 	<button v-if="editMode" @click="editMode = false" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
 	<button v-else @click="editMode = true" class="_textButton edit" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>