summaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/components/global/ad.vue77
-rw-r--r--src/client/components/media-image.vue2
-rw-r--r--src/client/components/ui/modal.vue6
-rw-r--r--src/client/instance.ts9
-rw-r--r--src/client/pages/instance/ads.vue6
-rw-r--r--src/client/pages/instance/index.vue2
-rw-r--r--src/client/pages/instance/instance.vue6
-rw-r--r--src/client/pages/instance/logs.vue20
-rw-r--r--src/client/pages/instance/queue.chart.vue6
-rw-r--r--src/client/store.ts4
-rw-r--r--src/client/ui/deck/widgets-column.vue5
-rw-r--r--src/client/widgets/federation.vue4
12 files changed, 105 insertions, 42 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;
diff --git a/src/client/instance.ts b/src/client/instance.ts
index bd6b1bd571..024ff1acbd 100644
--- a/src/client/instance.ts
+++ b/src/client/instance.ts
@@ -3,10 +3,17 @@ import { api } from './os';
// TODO: 他のタブと永続化されたstateを同期
-type Instance = {
+export type Instance = {
emojis: {
category: string;
}[];
+ ads: {
+ id: string;
+ ratio: number;
+ place: string;
+ url: string;
+ imageUrl: string;
+ }[];
};
const data = localStorage.getItem('instance');
diff --git a/src/client/pages/instance/ads.vue b/src/client/pages/instance/ads.vue
index 20747d6f9c..6b536793b7 100644
--- a/src/client/pages/instance/ads.vue
+++ b/src/client/pages/instance/ads.vue
@@ -15,12 +15,17 @@
<MkRadio v-model="ad.place" value="horizontal">horizontal</MkRadio>
<MkRadio v-model="ad.place" value="horizontal-big">horizontal-big</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.ratio" type="number">
+ <span>{{ $ts.ratio }}</span>
+ </MkInput>
<MkInput v-model:value="ad.expiresAt" type="date">
<span>{{ $ts.expiration }}</span>
</MkInput>
@@ -82,6 +87,7 @@ export default defineComponent({
memo: '',
place: 'square',
priority: 'middle',
+ ratio: 1,
url: '',
imageUrl: null,
expiresAt: null,
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 974c4345bb..acd46518f5 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -43,6 +43,7 @@
<FormGroup>
<template #label>{{ $ts.info }}</template>
<FormLink :active="page === 'database'" replace to="/instance/database"><template #icon><i class="fas fa-database"></i></template>{{ $ts.database }}</FormLink>
+ <FormLink :active="page === 'logs'" replace to="/instance/logs"><template #icon><i class="fas fa-stream"></i></template>{{ $ts.logs }}</FormLink>
</FormGroup>
</FormBase>
</div>
@@ -105,6 +106,7 @@ export default defineComponent({
case 'announcements': return defineAsyncComponent(() => import('./announcements.vue'));
case 'ads': return defineAsyncComponent(() => import('./ads.vue'));
case 'database': return defineAsyncComponent(() => import('./database.vue'));
+ case 'logs': return defineAsyncComponent(() => import('./logs.vue'));
case 'abuses': return defineAsyncComponent(() => import('./abuses.vue'));
case 'settings': return defineAsyncComponent(() => import('./settings.vue'));
case 'files-settings': return defineAsyncComponent(() => import('./files-settings.vue'));
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index f52e5d866b..75a24bcb80 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -123,7 +123,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
import Chart from 'chart.js';
import XModalWindow from '@client/components/ui/modal-window.vue';
import MkUsersDialog from '@client/components/users-dialog.vue';
@@ -280,7 +280,7 @@ export default defineComponent({
}
Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
- this.chartInstance = new Chart(this.canvas, {
+ this.chartInstance = markRaw(new Chart(this.canvas, {
type: 'line',
data: {
labels: new Array(chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
@@ -331,7 +331,7 @@ export default defineComponent({
mode: 'index',
}
}
- });
+ }));
},
getDate(ago: number) {
diff --git a/src/client/pages/instance/logs.vue b/src/client/pages/instance/logs.vue
index 7b634259d3..112b0f66d0 100644
--- a/src/client/pages/instance/logs.vue
+++ b/src/client/pages/instance/logs.vue
@@ -5,13 +5,13 @@
<span>{{ $ts.domain }}</span>
</MkInput>
<MkSelect v-model:value="logLevel">
- <template #label>{{ $ts.level }}</template>
- <option value="all">{{ $ts.levels.all }}</option>
- <option value="info">{{ $ts.levels.info }}</option>
- <option value="success">{{ $ts.levels.success }}</option>
- <option value="warning">{{ $ts.levels.warning }}</option>
- <option value="error">{{ $ts.levels.error }}</option>
- <option value="debug">{{ $ts.levels.debug }}</option>
+ <template #label>Level</template>
+ <option value="all">All</option>
+ <option value="info">Info</option>
+ <option value="success">Success</option>
+ <option value="warning">Warning</option>
+ <option value="error">Error</option>
+ <option value="debug">Debug</option>
</MkSelect>
</div>
@@ -45,6 +45,8 @@ export default defineComponent({
MkTextarea,
},
+ emits: ['info'],
+
data() {
return {
[symbols.PAGE_INFO]: {
@@ -72,6 +74,10 @@ export default defineComponent({
this.fetchLogs();
},
+ mounted() {
+ this.$emit('info', this[symbols.PAGE_INFO]);
+ },
+
methods: {
fetchLogs() {
os.api('admin/logs', {
diff --git a/src/client/pages/instance/queue.chart.vue b/src/client/pages/instance/queue.chart.vue
index 446c979209..0cd983127f 100644
--- a/src/client/pages/instance/queue.chart.vue
+++ b/src/client/pages/instance/queue.chart.vue
@@ -27,7 +27,7 @@
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
import Chart from 'chart.js';
import number from '../../filters/number';
@@ -69,7 +69,7 @@ export default defineComponent({
Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
- this.chart = new Chart(this.$refs.chart, {
+ this.chart = markRaw(new Chart(this.$refs.chart, {
type: 'line',
data: {
labels: [],
@@ -152,7 +152,7 @@ export default defineComponent({
mode: 'index',
}
}
- });
+ }));
this.connection.on('stats', this.onStats);
this.connection.on('statsLog', this.onStatsLog);
diff --git a/src/client/store.ts b/src/client/store.ts
index 376135a99d..1a3286554d 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -55,6 +55,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'account',
default: []
},
+ mutedAds: {
+ where: 'account',
+ default: [] as string[]
+ },
menu: {
where: 'deviceAccount',
diff --git a/src/client/ui/deck/widgets-column.vue b/src/client/ui/deck/widgets-column.vue
index 47d7e7e314..69aaaffa88 100644
--- a/src/client/ui/deck/widgets-column.vue
+++ b/src/client/ui/deck/widgets-column.vue
@@ -64,11 +64,8 @@ export default defineComponent({
<style lang="scss" scoped>
.wtdtxvec {
--margin: 8px;
+ --panelShadow: none;
padding: 0 var(--margin);
-
- ::v-deep(._panel) {
- box-shadow: none;
- }
}
</style>
diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index 3f2e1e691d..8ab7f594a2 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -114,6 +114,7 @@ export default defineComponent({
overflow: hidden;
font-size: 0.9em;
color: var(--fg);
+ padding-right: 8px;
> .a {
display: block;
@@ -129,6 +130,9 @@ export default defineComponent({
font-size: 75%;
opacity: 0.7;
line-height: $bodyInfoHieght;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
}
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-20 03:32:31 +0000