feat(client): 自動でもっと見るオプション (#6403)

* wip

* ugokanai

* wip

* implement setting subscribing

* fix lint

* :v:

* Update notifications.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

6 files changed, 35 insertions, 14 deletions

diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue
index 65eb1cb816..3e7b7d04ae 100644
--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -19,17 +19,17 @@
 		@drop.prevent.stop="onDrop"
 	>
 		<div class="contents" ref="contents">
-			<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
+			<div class="folders" ref="foldersContainer" v-show="folders.length > 0">
 				<x-folder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
-				<mk-button v-if="moreFolders">{{ $t('loadMore') }}</mk-button>
+				<mk-button ref="moreFolders" v-if="moreFolders">{{ $t('loadMore') }}</mk-button>
 			</div>
-			<div class="files" ref="filesContainer" v-if="files.length > 0">
+			<div class="files" ref="filesContainer" v-show="files.length > 0">
 				<x-file v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
-				<mk-button v-if="moreFiles" @click="fetchMoreFiles">{{ $t('loadMore') }}</mk-button>
+				<mk-button ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $t('loadMore') }}</mk-button>
 			</div>
 			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
 				<p v-if="draghover">{{ $t('empty-draghover') }}</p>
@@ -116,6 +116,13 @@ export default Vue.extend({
 
 			fetching: true,
 
+			ilFilesObserver: new IntersectionObserver(
+				(entries) => entries.some((entry) => entry.isIntersecting)
+				&& !this.fetching && this.moreFiles &&
+					this.fetchMoreFiles()
+			),
+			moreFilesElement: null as Element,
+
 			faAngleRight
 		};
 	},
@@ -127,6 +134,12 @@ export default Vue.extend({
 	},
 
 	mounted() {
+		if (this.$store.state.device.enableInfiniteScroll && this.$refs.loadMoreFiles) {
+			this.$nextTick(() => {
+				this.ilFilesObserver.observe((this.$refs.loadMoreFiles as Vue).$el)
+			});
+		}
+
 		this.connection = this.$root.stream.useSharedConnection('drive');
 
 		this.connection.on('fileCreated', this.onStreamDriveFileCreated);
@@ -143,8 +156,17 @@ export default Vue.extend({
 		}
 	},
 
+	activated() {
+		if (this.$store.state.device.enableInfiniteScroll) {
+			this.$nextTick(() => {
+				this.ilFilesObserver.observe((this.$refs.loadMoreFiles as Vue).$el)
+			});
+		}
+	},
+
 	beforeDestroy() {
 		this.connection.dispose();
+		this.ilFilesObserver.disconnect();
 	},
 
 	methods: {
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index 515bc58e2e..c83cbd1aa1 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -7,8 +7,8 @@
 
 	<mk-error v-if="error" @retry="init()"/>
 
-	<div v-if="more && reversed" style="margin-bottom: var(--margin);">
-		<button class="_panel _button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()">
+	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
+		<button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
 		</button>
@@ -18,8 +18,8 @@
 		<x-note :note="note" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
 	</x-list>
 
-	<div v-if="more && !reversed" style="margin-top: var(--margin);">
-		<button class="_panel _button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()">
+	<div v-show="more && !reversed" style="margin-top: var(--margin);">
+		<button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
 		</button>
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index 3ed198a04c..36464a3096 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -5,7 +5,7 @@
 		<x-notification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
 	</x-list>
 
-	<button class="_panel _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
+	<button class="_panel _button" ref="loadMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 		<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 		<template v-if="moreFetching"><mk-loading inline/></template>
 	</button>
diff --git a/src/client/components/ui/pagination.vue b/src/client/components/ui/pagination.vue
index e888b7420c..79d322bbc4 100644
--- a/src/client/components/ui/pagination.vue
+++ b/src/client/components/ui/pagination.vue
@@ -4,8 +4,8 @@
 	<div class="empty" v-if="empty" key="_empty_">
 		<slot name="empty"></slot>
 	</div>
-	<div class="more" v-if="more" key="_more_">
-		<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
+	<div class="more" v-show="more" key="_more_">
+		<mk-button class="button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
 		</mk-button>
diff --git a/src/client/components/user-list.vue b/src/client/components/user-list.vue
index 7a9cd58a48..0204cf9d06 100644
--- a/src/client/components/user-list.vue
+++ b/src/client/components/user-list.vue
@@ -22,7 +22,7 @@
 			</div>
 			<mk-follow-button class="koudoku-button" v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" mini/>
 		</div>
-		<button class="more" :class="{ fetching: moreFetching }" v-if="more" @click="fetchMore()" :disabled="moreFetching">
+		<button class="more" ref="loadMore" :class="{ fetching: moreFetching }" v-show="more" :disabled="moreFetching">
 			<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>{{ moreFetching ? $t('loading') : $t('loadMore') }}
 		</button>
 	</div>
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index 0e0cc36c2a..575d031182 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -15,8 +15,7 @@
 				</div>
 			</router-link>
 		</div>
-
-		<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
+		<button class="more _button" ref="loadMore" v-show="more" @click="fetchMore" :disabled="moreFetching">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template>
 		</button>