refactor: 📦 fuck them libs

packages/client/package.json

@@ -46,7 +46,6 @@
 		"seedrandom": "3.0.5",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
-		"swiped-events": "^1.1.6",
 		"syuilo-password-strength": "0.0.1",
 		"tesseract.js": "^2.1.5",
 		"textarea-caret": "3.1.0",

packages/client/src/pages/timeline.vue

@@ -1,15 +1,33 @@
 <template>
-<MkStickyContainer>
+	<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template>
+		<template #header
+			><MkPageHeader
+				v-model:tab="src"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-my-avatar="true"
+		/></template>
 		<MkSpacer :content-max="800">
 			<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
-			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
+				<XTutorial
-			<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
+					v-if="$store.reactiveState.tutorial.value != -1"
+					class="tutorial _block"
+				/>
+				<XPostForm
+					v-if="$store.reactiveState.showFixedPostForm.value"
+					class="post-form _block"
+					fixed
+				/>
 
-			<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
+				<div v-if="queue > 0" class="new">
+					<button class="_buttonPrimary" @click="top()">
+						{{ i18n.ts.newNoteRecived }}
+					</button>
+				</div>
 				<div class="tl _block">
 					<XTimeline
-					ref="tl" :key="src"
+						ref="tl"
+						:key="src"
 						class="tl"
 						:src="src"
 						:sound="true"
@@ -18,7 +36,7 @@
 				</div>
 			</div>
 		</MkSpacer>
-</MkStickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -34,16 +52,20 @@ import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 
-import 'swiped-events';
-
 const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
 
-const isLocalTimelineAvailable = !instance.disableLocalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
+const isLocalTimelineAvailable =
-const isRecommendedTimelineAvailable = !instance.disableRecommendedTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
+	!instance.disableLocalTimeline ||
-const isGlobalTimelineAvailable = !instance.disableGlobalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
+	($i != null && ($i.isModerator || $i.isAdmin));
+const isRecommendedTimelineAvailable =
+	!instance.disableRecommendedTimeline ||
+	($i != null && ($i.isModerator || $i.isAdmin));
+const isGlobalTimelineAvailable =
+	!instance.disableGlobalTimeline ||
+	($i != null && ($i.isModerator || $i.isAdmin));
 const enableGuestTimeline = instance.enableGuestTimeline;
 const keymap = {
-	't': focus,
+	t: focus,
 };
 
 const DESKTOP_THRESHOLD = 1100;
@@ -51,18 +73,24 @@ const MOBILE_THRESHOLD = 500;
 
 // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
-const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+const isMobile = ref(
+	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
+);
 window.addEventListener('resize', () => {
-	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+	isMobile.value =
+		deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
 const tlComponent = $ref<InstanceType<typeof XTimeline>>();
 const rootEl = $ref<HTMLElement>();
 
 let queue = $ref(0);
-const src = $computed({ get: () => defaultStore.reactiveState.tl.value.src, set: (x) => saveSrc(x) });
+const src = $computed({
+	get: () => defaultStore.reactiveState.tl.value.src,
+	set: (x) => saveSrc(x),
+});
 
-watch ($$(src), () => queue = 0);
+watch($$(src), () => (queue = 0));
 
 function queueUpdated(q: number): void {
 	queue = q;
@@ -74,7 +102,7 @@ function top(): void {
 
 async function chooseList(ev: MouseEvent): Promise<void> {
 	const lists = await os.api('users/lists/list');
-	const items = lists.map(list => ({
+	const items = lists.map((list) => ({
 		type: 'link' as const,
 		text: list.name,
 		to: `/timeline/list/${list.id}`,
@@ -84,7 +112,7 @@ async function chooseList(ev: MouseEvent): Promise<void> {
 
 async function chooseAntenna(ev: MouseEvent): Promise<void> {
 	const antennas = await os.api('antennas/list');
-	const items = antennas.map(antenna => ({
+	const items = antennas.map((antenna) => ({
 		type: 'link' as const,
 		text: antenna.name,
 		indicate: antenna.hasUnreadNote,
@@ -95,7 +123,7 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
 
 async function chooseChannel(ev: MouseEvent): Promise<void> {
 	const channels = await os.api('channels/followed');
-	const items = channels.map(channel => ({
+	const items = channels.map((channel) => ({
 		type: 'link' as const,
 		text: channel.name,
 		indicate: channel.hasUnreadNote,
@@ -104,7 +132,9 @@ async function chooseChannel(ev: MouseEvent): Promise<void> {
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
-function saveSrc(newSrc: 'home' | 'local' | 'recommended' | 'social' | 'global'): void {
+function saveSrc(
+	newSrc: 'home' | 'local' | 'recommended' | 'social' | 'global'
+): void {
 	defaultStore.set('tl', {
 		...defaultStore.state.tl,
 		src: newSrc,
@@ -124,75 +154,154 @@ function focus(): void {
 	tlComponent.focus();
 }
 
-const headerActions = $computed(() => [{
+const headerActions = $computed(() => [
+	{
 		icon: 'fas fa-list-ul',
 		title: i18n.ts.lists,
 		iconOnly: true,
 		handler: chooseList,
-}, {
+	},
+	{
 		icon: 'fas fa-satellite',
 		title: i18n.ts.antennas,
 		iconOnly: true,
 		handler: chooseAntenna,
-}, /* **TODO: fix timetravel** {
+	} /* **TODO: fix timetravel** {
 	icon: 'fas fa-calendar-alt',
 	title: i18n.ts.jumpToSpecifiedDate,
 	iconOnly: true,
 	handler: timetravel,
-}*/]);
+}*/,
+]);
 
-const headerTabs = $computed(() => [{
+const headerTabs = $computed(() => [
+	{
 		key: 'home',
 		title: i18n.ts._timelines.home,
 		icon: 'fas fa-home',
 		iconOnly: true,
-}, ...(isLocalTimelineAvailable ? [{
+	},
+	...(isLocalTimelineAvailable
+		? [
+			{
 				key: 'local',
 				title: i18n.ts._timelines.local,
 				icon: 'fas fa-user-group',
 				iconOnly: true,
-}] : []),
+			},
-...(isRecommendedTimelineAvailable ? [{
+		]
+		: []),
+	...(isRecommendedTimelineAvailable
+		? [
+			{
 				key: 'recommended',
 				title: i18n.ts._timelines.recommended,
 				icon: 'fas fa-signs-post',
 				iconOnly: true,
-}] : []),
+			},
-...(isLocalTimelineAvailable ? [{
+		]
+		: []),
+	...(isLocalTimelineAvailable
+		? [
+			{
 				key: 'social',
 				title: i18n.ts._timelines.social,
 				icon: 'fas fa-handshake-simple',
 				iconOnly: true,
-}] : []),
+			},
-...(isGlobalTimelineAvailable ? [{
+		]
+		: []),
+	...(isGlobalTimelineAvailable
+		? [
+			{
 				key: 'global',
 				title: i18n.ts._timelines.global,
 				icon: 'fas fa-globe',
 				iconOnly: true,
-}] : [])]);
+			},
+		]
+		: []),
+]);
 
-definePageMetadata(computed(() => ({
+definePageMetadata(
+	computed(() => ({
 		title: i18n.ts.timeline,
-	icon: src === 'local' ? 'fas fa-user-group' : src === 'social' ? 'fas fa-handshake-simple' : src === 'recommended' ? 'fas fa-signs-post' : src === 'global' ? 'fas fa-globe' : 'fas fa-home',
+		icon:
-})));
+			src === 'local'
+				? 'fas fa-user-group'
+				: src === 'social'
+					? 'fas fa-handshake-simple'
+					: src === 'recommended'
+						? 'fas fa-signs-post'
+						: src === 'global'
+							? 'fas fa-globe'
+							: 'fas fa-home',
+	}))
+);
 
 if (isMobile.value) {
-	document.addEventListener('swipeleft', () => {
+	document.addEventListener('touchstart', handleTouchStart, false);
-		const current = headerTabs.values.find(x => x.key === src.value);
+	document.addEventListener('touchmove', handleTouchMove, false);
-		const next = headerTabs.values[(headerTabs.values.indexOf(current) - 1) % headerTabs.values.length];
-		saveSrc(next.key);
-	});
-	document.addEventListener('swiperight', () => {
-		const current = headerTabs.values.find(x => x.key === src.value);
-		const next = headerTabs.values[(headerTabs.values.indexOf(current) + 1) % headerTabs.values.length];
-		saveSrc(next.key);
-	});
-}
 
+	let xDown = null;
+	let yDown = null;
+
+	function getTouches(evt) {
+		return (
+			evt.touches || evt.originalEvent.touches
+		);
+	}
+
+	function handleTouchStart(evt) {
+		const firstTouch = getTouches(evt)[0];
+		xDown = firstTouch.clientX;
+		yDown = firstTouch.clientY;
+	}
+
+	function handleTouchMove(evt) {
+		if (!xDown || !yDown) {
+			return;
+		}
+
+		let xUp = evt.touches[0].clientX;
+		let yUp = evt.touches[0].clientY;
+
+		let xDiff = xDown - xUp;
+		let yDiff = yDown - yUp;
+
+		if (Math.abs(xDiff) > Math.abs(yDiff)) {
+			if (xDiff > 0) {
+				console.log('right swipe');
+				const current = headerTabs.values.find((x) => x.key === src.value);
+				const next =
+					headerTabs.values[
+						(headerTabs.values.indexOf(current) + 1) % headerTabs.values.length
+					];
+				saveSrc(next.key);
+			} else {
+				console.log('left swipe');
+				const current = headerTabs.values.find((x) => x.key === src.value);
+				const next =
+					headerTabs.values[
+						(headerTabs.values.indexOf(current) - 1) % headerTabs.values.length
+					];
+				saveSrc(next.key);
+			}
+		} /* else {
+			if (yDiff > 0) {
+				// down swipe
+			} else {
+				// up swipe
+			}
+		} */
+		/* reset values */
+		xDown = null;
+		yDown = null;
+	}
+}
 </script>
 
 <style lang="scss" scoped>
-
 .cmuxhskf {
 	> .new {
 		position: sticky;

yarn.lock

@@ -3900,7 +3900,6 @@ __metadata:
     start-server-and-test: 1.14.0
     strict-event-emitter-types: 2.0.0
     stringz: 2.1.0
-    swiped-events: ^1.1.6
     syuilo-password-strength: 0.0.1
     tesseract.js: ^2.1.5
     textarea-caret: 3.1.0
@@ -10360,13 +10359,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"natives@npm:^1.1.6":
-  version: 1.1.6
-  resolution: "natives@npm:1.1.6"
-  checksum: f9823dddba1eb71dc34f7e684d6d2bb39e709bdc54c42e89f27ec4a87966564644d88d2ea332ddfb91d00129a03d8e73abc35b09a0d985a80d6eaad95f3c1887
-  languageName: node
-  linkType: hard
-
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -14054,15 +14046,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"swiped-events@npm:^1.1.6":
-  version: 1.1.6
-  resolution: "swiped-events@npm:1.1.6"
-  dependencies:
-    natives: ^1.1.6
-  checksum: c2c88d0390c667938213fe661c693522d32d0432acbd02ccb8f1883b67b503ffdfa22cbec89d2102d1f9f61023aa477b704920fd1ec883ae813d8756aacd5506
-  languageName: node
-  linkType: hard
-
 "symbol-tree@npm:^3.2.4":
   version: 3.2.4
   resolution: "symbol-tree@npm:3.2.4"