From b1a75177a0165f726741219206bb52c02c5f6221 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 5 Jan 2023 03:28:25 +0900
Subject: [PATCH] =?UTF-8?q?enhance:=20RSS=E3=82=A6=E3=82=A3=E3=82=B8?=
 =?UTF-8?q?=E3=82=A7=E3=83=83=E3=83=88=20/=20RSS=E3=83=86=E3=82=A3?=
 =?UTF-8?q?=E3=83=83=E3=82=AB=E3=83=BC=E3=82=A6=E3=82=A3=E3=82=B8=E3=82=A7?=
 =?UTF-8?q?=E3=83=83=E3=83=88=E3=82=92=E3=81=84=E3=81=84=E6=84=9F=E3=81=98?=
 =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B=20(#9469)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :v:

* use useInterval

* :v:

* rawItems.value.length !== 0

* fix

* https://github.com/misskey-dev/misskey/pull/9469#discussion_r1061763613
---
 packages/frontend/src/scripts/use-interval.ts |  11 +-
 packages/frontend/src/widgets/rss-ticker.vue  | 157 +++++++++++-------
 packages/frontend/src/widgets/rss.vue         |  88 ++++++----
 3 files changed, 159 insertions(+), 97 deletions(-)

diff --git a/packages/frontend/src/scripts/use-interval.ts b/packages/frontend/src/scripts/use-interval.ts
index 201ba417e..601dea672 100644
--- a/packages/frontend/src/scripts/use-interval.ts
+++ b/packages/frontend/src/scripts/use-interval.ts
@@ -3,7 +3,7 @@ import { onMounted, onUnmounted } from 'vue';
 export function useInterval(fn: () => void, interval: number, options: {
 	immediate: boolean;
 	afterMounted: boolean;
-}): void {
+}): (() => void) | undefined {
 	if (Number.isNaN(interval)) return;
 
 	let intervalId: number | null = null;
@@ -18,7 +18,14 @@ export function useInterval(fn: () => void, interval: number, options: {
 		intervalId = window.setInterval(fn, interval);
 	}
 
-	onUnmounted(() => {
+	const clear = () => {
 		if (intervalId) window.clearInterval(intervalId);
+		intervalId = null;
+	};
+
+	onUnmounted(() => {
+		clear();
 	});
+
+	return clear;
 }
diff --git a/packages/frontend/src/widgets/rss-ticker.vue b/packages/frontend/src/widgets/rss-ticker.vue
index c2d6dd287..37672e13c 100644
--- a/packages/frontend/src/widgets/rss-ticker.vue
+++ b/packages/frontend/src/widgets/rss-ticker.vue
@@ -3,13 +3,15 @@
 	<template #header><i class="ti ti-rss"></i>RSS</template>
 	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
 
-	<div class="ekmkgxbk">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="feed">
-			<Transition name="change" mode="default">
+	<div :class="$style.feed">
+		<div v-if="fetching" :class="$style.loading">
+			<MkEllipsis/>
+		</div>
+		<div v-else>
+			<Transition :name="$style.change" mode="default" appear>
 				<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
-					<span v-for="item in items" class="item">
-						<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
+					<span v-for="item in items" :class="$style.item" :key="item.link">
+						<a :class="$style.link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
 					</span>
 				</MarqueeText>
 			</Transition>
@@ -19,14 +21,14 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import MarqueeText from '@/components/MkMarquee.vue';
 import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
 import MkContainer from '@/components/MkContainer.vue';
-import { useInterval } from '@/scripts/use-interval';
 import { shuffle } from '@/scripts/shuffle';
+import { url as base } from '@/config';
+import { useInterval } from '@/scripts/use-interval';
 
 const name = 'rssTicker';
 
@@ -43,6 +45,10 @@ const widgetPropsDef = {
 		type: 'number' as const,
 		default: 60,
 	},
+	maxEntries: {
+		type: 'number' as const,
+		default: 15,
+	},
 	duration: {
 		type: 'range' as const,
 		default: 70,
@@ -78,29 +84,49 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const items = ref([]);
+const rawItems = ref([]);
+const items = computed(() => {
+	const newItems = rawItems.value.slice(0, widgetProps.maxEntries)
+	if (widgetProps.shuffle) {
+		shuffle(newItems);
+	}
+	return newItems;
+});
 const fetching = ref(true);
+const fetchEndpoint = computed(() => {
+	const url = new URL('/api/fetch-rss', base);
+	url.searchParams.set('url', widgetProps.url);
+	return url;
+});
+let intervalClear = $ref<(() => void) | undefined>();
+
 let key = $ref(0);
 
 const tick = () => {
-	window.fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
-		res.json().then(feed => {
-			if (widgetProps.shuffle) {
-				shuffle(feed.items);
-			}
-			items.value = feed.items;
-			fetching.value = false;
-			key++;
-		});
+	if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
+
+	window.fetch(fetchEndpoint.value, {})
+	.then(res => res.json())
+	.then(feed => {
+		if (widgetProps.shuffle) {
+			shuffle(feed.items);
+		}
+		rawItems.value = feed.items;
+		fetching.value = false;
+		key++;
 	});
 };
 
-watch(() => widgetProps.url, tick);
-
-useInterval(tick, Math.max(10000, widgetProps.refreshIntervalSec * 1000), {
-	immediate: true,
-	afterMounted: true,
-});
+watch(() => fetchEndpoint, tick);
+watch(() => widgetProps.refreshIntervalSec, () => {
+	if (intervalClear) {
+		intervalClear();
+	}
+	intervalClear = useInterval(tick, Math.max(10000, widgetProps.refreshIntervalSec * 1000), {
+		immediate: true,
+		afterMounted: true,
+	});
+}, { immediate: true });
 
 defineExpose<WidgetComponentExpose>({
 	name,
@@ -109,44 +135,49 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
-	position: absolute;
-	top: 0;
-  transition: all 1s ease;
-}
-.change-enter-from {
-  opacity: 0;
-	transform: translateY(-100%);
-}
-.change-leave-to {
-  opacity: 0;
-	transform: translateY(100%);
-}
-
-.ekmkgxbk {
-	> .feed {
-		--height: 42px;
-		padding: 0;
-		font-size: 0.9em;
-		line-height: var(--height);
-		height: var(--height);
-		contain: strict;
-
-		::v-deep(.item) {
-			display: inline-flex;
-			align-items: center;
-			vertical-align: bottom;
-			color: var(--fg);
-
-			> .divider {
-				display: inline-block;
-				width: 0.5px;
-				height: 16px;
-				margin: 0 1em;
-				background: var(--divider);
-			}
-		}
+<style lang="scss" module>
+.change {
+	&:global(-enter-active),
+	&:global(-leave-active) {
+		position: absolute;
+		top: 0;
+		transition: all 1s ease;
+	}
+	&:global(-enter-from) {
+		opacity: 0;
+		transform: translateY(-100%);
+	}
+	&:global(-leave-to) {
+		opacity: 0;
+		transform: translateY(100%);
 	}
 }
+
+.feed {
+	--height: 42px;
+	padding: 0;
+	font-size: 0.9em;
+	line-height: var(--height);
+	height: var(--height);
+	contain: strict;
+}
+
+.loading {
+	text-align: center;
+}
+
+.item {
+	display: inline-flex;
+	align-items: center;
+	vertical-align: bottom;
+	color: var(--fg);
+}
+
+.divider {
+	display: inline-block;
+	width: 0.5px;
+	height: 16px;
+	margin: 0 1em;
+	background: var(--divider);
+}
 </style>
diff --git a/packages/frontend/src/widgets/rss.vue b/packages/frontend/src/widgets/rss.vue
index c0338c8e4..554413cd1 100644
--- a/packages/frontend/src/widgets/rss.vue
+++ b/packages/frontend/src/widgets/rss.vue
@@ -5,19 +5,24 @@
 
 	<div class="ekmkgxbj">
 		<MkLoading v-if="fetching"/>
-		<div v-else class="feed">
-			<a v-for="item in items" class="item" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
+		<div class="_fullinfo" v-else-if="(!items || items.length === 0) && widgetProps.showHeader">
+			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<div>{{ i18n.ts.nothing }}</div>
+		</div>
+		<div v-else :class="$style.feed">
+			<a v-for="item in items" :class="$style.item" :href="item.link" :key="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
 		</div>
 	</div>
 </MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
 import MkContainer from '@/components/MkContainer.vue';
+import { url as base } from '@/config';
+import { i18n } from '@/i18n';
 import { useInterval } from '@/scripts/use-interval';
 
 const name = 'rss';
@@ -27,6 +32,14 @@ const widgetPropsDef = {
 		type: 'string' as const,
 		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
 	},
+	refreshIntervalSec: {
+		type: 'number' as const,
+		default: 60,
+	},
+	maxEntries: {
+		type: 'number' as const,
+		default: 15,
+	},
 	showHeader: {
 		type: 'boolean' as const,
 		default: true,
@@ -47,24 +60,37 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
-const items = ref([]);
+const rawItems = ref([]);
+const items = computed(() => rawItems.value.slice(0, widgetProps.maxEntries));
 const fetching = ref(true);
+const fetchEndpoint = computed(() => {
+	const url = new URL('/api/fetch-rss', base);
+	url.searchParams.set('url', widgetProps.url);
+	return url;
+});
+let intervalClear = $ref<(() => void) | undefined>();
 
 const tick = () => {
-	window.fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
-		res.json().then(feed => {
-			items.value = feed.items;
-			fetching.value = false;
-		});
+	if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
+
+	window.fetch(fetchEndpoint.value, {})
+	.then(res => res.json())
+	.then(feed => {
+		rawItems.value = feed.items ?? [];
+		fetching.value = false;
 	});
 };
 
-watch(() => widgetProps.url, tick);
-
-useInterval(tick, 60000, {
-	immediate: true,
-	afterMounted: true,
-});
+watch(() => fetchEndpoint, tick);
+watch(() => widgetProps.refreshIntervalSec, () => {
+	if (intervalClear) {
+		intervalClear();
+	}
+	intervalClear = useInterval(tick, Math.max(10000, widgetProps.refreshIntervalSec * 1000), {
+		immediate: true,
+		afterMounted: true,
+	});
+}, { immediate: true });
 
 defineExpose<WidgetComponentExpose>({
 	name,
@@ -73,24 +99,22 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
-.ekmkgxbj {
-	> .feed {
-		padding: 0;
-		font-size: 0.9em;
+<style lang="scss" module>
+.feed {
+	padding: 0;
+	font-size: 0.9em;
+}
 
-		> .item {
-			display: block;
-			padding: 8px 16px;
-			color: var(--fg);
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
+.item {
+	display: block;
+	padding: 8px 16px;
+	color: var(--fg);
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
 
-			&:nth-child(even) {
-				background: rgba(#000, 0.05);
-			}
-		}
+	&:nth-child(even) {
+		background: rgba(#000, 0.05);
 	}
 }
 </style>