wip

packages/frontend/src/components/MkPullToRefresh.vue

@@ -27,6 +27,7 @@ import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
 import { getScrollContainer } from '@@/js/scroll.js';
 import { i18n } from '@/i18n.js';
 import { isHorizontalSwipeSwiping } from '@/utility/touch.js';
+import * as sound from '@/utility/sound.js';
 
 const SCROLL_STOP = 10;
 const MAX_PULL_DISTANCE = Infinity;
@@ -200,7 +201,13 @@ function moving(event: MouseEvent | TouchEvent) {
 	const moveHeight = moveScreenY - startScreenY!;
 	pullDistance.value = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
 
+	let before = isPulledEnough.value;
 	isPulledEnough.value = pullDistance.value >= FIRE_THRESHOLD;
+	if (before === false && isPulledEnough.value === true) {
+		sound.playUrl('/client-assets/sounds/syuilo/sho.mp3', {
+			volume: 1,
+		});
+	}
 }
 
 /**
@@ -209,6 +216,9 @@ function moving(event: MouseEvent | TouchEvent) {
  * タイムアウトがないのでこれを最終的に実行しないと出たままになる
  */
 function refreshFinished() {
+	sound.playUrl('/client-assets/sounds/syuilo/pa2.mp3', {
+		volume: 1,
+	});
 	closeContent().then(() => {
 		isPulling.value = false;
 		isRefreshing.value = false;

packages/frontend/src/components/global/RouterView.vue

@@ -5,23 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_pageContainer" :class="$style.root">
-	<Transition
-		mode="in-out"
-		:enterActiveClass="prefer.s.animation ? (isBackNavigation ? $style.transition_back_enterActive : $style.transition_forward_enterActive) : ''"
-		:leaveActiveClass="prefer.s.animation ? (isBackNavigation ? $style.transition_back_leaveActive : $style.transition_forward_leaveActive) : ''"
-		:enterFromClass="prefer.s.animation ? (isBackNavigation ? $style.transition_back_enterFrom : $style.transition_forward_enterFrom) : ''"
-		:leaveToClass="prefer.s.animation ? (isBackNavigation ? $style.transition_back_leaveTo : $style.transition_forward_leaveTo) : ''"
-	>
-		<KeepAlive :max="prefer.s.numberOfPageCache">
-			<Suspense :timeout="1000">
-				<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+	<KeepAlive :max="prefer.s.numberOfPageCache">
+		<Suspense :timeout="0">
+			<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
 
-				<template #fallback>
-					<MkLoading/>
-				</template>
-			</Suspense>
-		</KeepAlive>
-	</Transition>
+			<template #fallback>
+				<MkLoading/>
+			</template>
+		</Suspense>
+	</KeepAlive>
 </div>
 </template>
 
@@ -55,7 +47,6 @@ const currentPageComponent = shallowRef('component' in current.route ? current.r
 const currentPageProps = ref(current.props);
 let currentRoutePath = current.route.path;
 const key = ref(router.getCurrentFullPath());
-const isBackNavigation = ref(false);
 
 router.useListener('change', ({ resolved }) => {
 	if (resolved == null || 'redirect' in resolved.route) return;
@@ -73,44 +64,6 @@ router.useListener('change', ({ resolved }) => {
 </script>
 
 <style lang="scss" module>
-.transition_forward_enterActive,
-.transition_forward_leaveActive {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: var(--MI_THEME-bg);
-	transition: transform 0.5s cubic-bezier(0,.25,.25,1), filter 0.5s cubic-bezier(0,.25,.25,1);
-}
-.transition_forward_enterFrom {
-	transform: translateX(100%);
-}
-.transition_forward_leaveTo {
-	transform: translateX(-50%);
-	filter: brightness(0.5);
-}
-
-.transition_back_enterActive,
-.transition_back_leaveActive {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: var(--MI_THEME-bg);
-	transition: transform 10.5s cubic-bezier(0,.25,.25,1), filter 10.5s cubic-bezier(0,.25,.25,1);
-}
-.transition_back_enterFrom {
-	transform: translateX(-20%);
-	filter: brightness(0.5);
-}
-.transition_back_leaveTo {
-	position: absolute;
-	transform: translateX(100%);
-	z-index: 100;
-}
-
 .root {
 	height: 100%;
 	background-color: var(--MI_THEME-bg);

packages/frontend/src/style.scss

@@ -209,7 +209,6 @@ rt {
 	container-type: size;
 	contain: strict;
 	overflow: auto;
-	overflow-x: clip;
 	overscroll-behavior: contain;
 }