From 150b5433c0739f3fb93b09ae1606dfd000f49850 Mon Sep 17 00:00:00 2001
From: harshbaz <106158714+harshbaz@users.noreply.github.com>
Date: Sat, 27 Aug 2022 15:10:49 +0530
Subject: [PATCH] Fix laggy swiping on iOS (#240)

* Show next video, do not fade in into view

* Fix laggy swiping. Add loading and no more slides
---
 .../src/components/video/VideoPlayer.svelte   |  3 +-
 .../src/components/video/VideosSwiper.svelte  | 40 +++++++++----------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/packages/web-client/src/components/video/VideoPlayer.svelte b/packages/web-client/src/components/video/VideoPlayer.svelte
index bba850ee8..8bf6caae6 100644
--- a/packages/web-client/src/components/video/VideoPlayer.svelte
+++ b/packages/web-client/src/components/video/VideoPlayer.svelte
@@ -46,8 +46,7 @@ export async function stop() {
 <player
 	i="{i}"
 	on:click="{() => ($playerState.muted = !$playerState.muted)}"
-	class="relative flex h-full w-full items-center justify-center transition-all duration-500 {autoplay &&
-	loaded
+	class="relative flex h-full w-full items-center justify-center transition-all duration-500 {loaded
 		? 'opacity-100'
 		: 'opacity-0'}"
 >
diff --git a/packages/web-client/src/components/video/VideosSwiper.svelte b/packages/web-client/src/components/video/VideosSwiper.svelte
index efdd32e60..1defd6b24 100644
--- a/packages/web-client/src/components/video/VideosSwiper.svelte
+++ b/packages/web-client/src/components/video/VideosSwiper.svelte
@@ -5,9 +5,7 @@ import { playerState } from '$stores/playerState';
 import { onMount, tick } from 'svelte';
 import VideoPlayer from './VideoPlayer.svelte';
 import { Swiper, SwiperSlide } from 'swiper/svelte';
-import { Mousewheel } from 'swiper';
 import 'swiper/css';
-import 'swiper/css/pagination';
 import { debounce } from 'throttle-debounce';
 
 export let fetchFromId: number = 0;
@@ -33,6 +31,7 @@ async function fetchNextVideos() {
 			fetchFromId = res.nextCount;
 			moreVideos = res.videosLeft;
 			loading = false;
+
 			// console.log('fetched', videos);
 		} catch (e) {
 			console.error(e);
@@ -51,9 +50,12 @@ async function handleChange(e: CustomEvent) {
 	updateURL();
 }
 
-const playVideo = debounce(50, async (index: number) => {
-	videoPlayers[index].play();
-	currentPlayingIndex = index;
+const playVideo = debounce(200, async (index: number) => {
+	if (!loading) {
+		videoPlayers[index].play();
+		currentPlayingIndex = index;
+		videoPlayers[index + 1]?.stop();
+	}
 });
 
 function updateURL() {
@@ -76,10 +78,8 @@ $: console.log({ currentVideoIndex });
 	observer
 	slidesPerView="{1}"
 	on:slideChange="{handleChange}"
-	speed="{500}"
-	mousewheel="{{ forceToAxis: true, sensitivity: 1, releaseOnEdges: true, thresholdDelta: 40 }}"
-	modules="{[Mousewheel]}"
-	class="mySwiper h-full w-full"
+	cssMode
+	class="h-full w-full"
 >
 	{#each videos as video, i (i)}
 		<SwiperSlide class="flex h-full w-full items-center justify-center">
@@ -94,18 +94,18 @@ $: console.log({ currentVideoIndex });
 		</SwiperSlide>
 	{/each}
 	{#if loading}
-		<div
-			class="relative flex h-full w-auto snap-center snap-always flex-col items-center justify-center space-y-8 px-8"
-		>
-			<div class="text-center text-lg font-bold">Loading</div>
-		</div>
+		<SwiperSlide class="flex h-full w-full items-center justify-center">
+			<div class="relative flex h-full w-full flex-col items-center justify-center space-y-8 px-8">
+				<div class="text-center text-lg font-bold">Loading</div>
+			</div>
+		</SwiperSlide>
 	{/if}
 	{#if !moreVideos}
-		<div
-			class="relative flex h-full w-auto snap-center snap-always flex-col items-center justify-center space-y-8 px-8"
-		>
-			<NoVideosIcon class="w-56" />
-			<div class="text-center text-lg font-bold">No more videos to display today</div>
-		</div>
+		<SwiperSlide class="flex h-full w-full items-center justify-center">
+			<div class="relative flex h-full w-full flex-col items-center justify-center space-y-8 px-8">
+				<NoVideosIcon class="w-56" />
+				<div class="text-center text-lg font-bold">No more videos to display today</div>
+			</div>
+		</SwiperSlide>
 	{/if}
 </Swiper>