swipeable content on mobile

site/src/scripts/components/area.js

@@ -1,5 +1,5 @@
 import { config } from "../config.js";
-import { splitArray, onWindowResize, removeWindowResize, elementExists } from "../functions.js";
+import { splitArray, onWindowResize, removeWindowResize, elementExists, onSwipe } from "../functions.js";
 import { preloadImages } from "../cache.js";
 import { getTrending } from "../api/trending.js";
 import { getRated } from "../api/rated.js";
@@ -250,6 +250,11 @@ export function initializeArea(area, initialSlides, labelText, failed, customSpl
     if (slides) {
         area.append(control);
         area.append(cards);
+
+        onSwipe(area, function (right) {
+            if (right) setNext();
+            else setPrevious();
+        });
     } else {
         area.append(notice);
     }

site/src/scripts/components/carousel.js

@@ -1,5 +1,5 @@
 import { config } from "../config.js";
-import { isHovered } from "../functions.js";
+import { isHovered, onSwipe } from "../functions.js";
 import { preloadImages } from "../cache.js";
 import { getTrending } from "../api/trending.js";
 import { watchContent } from "./watch.js";
@@ -103,7 +103,9 @@ function initializeCarousel(carousel, slides) {
     }
 
     function iterate() {
-        if (!isHovered(carousel) && !document.body.classList.contains("modal-active")) {
+        const isMobile = navigator.maxTouchPoints || "ontouchstart" in document.documentElement;
+
+        if (!isMobile && (!isHovered(carousel) && !document.body.classList.contains("modal-active"))) {
             setNext();
         }
     }
@@ -122,6 +124,11 @@ function initializeCarousel(carousel, slides) {
     if (slides) {
         carousel.append(details);
         carousel.append(control);
+
+        onSwipe(carousel, function (right) {
+            if (right) setNext();
+            else setPrevious();
+        });
     }
 }
 

site/src/scripts/components/genres.js

@@ -1,5 +1,5 @@
 import { config } from "../config.js";
-import { splitArray, onWindowResize, removeWindowResize, elementExists } from "../functions.js";
+import { splitArray, onWindowResize, removeWindowResize, elementExists, onSwipe } from "../functions.js";
 import { getGenres } from "../api/genres.js";
 import { hideModal, setModal, showModal } from "./modal.js";
 import { initializeArea } from "./area.js";
@@ -228,6 +228,11 @@ function initializeGenreArea(area, initialSlides, type, failed) {
     if (slides) {
         area.append(control);
         area.append(genres);
+
+        onSwipe(area, function (right) {
+            if (right) setNext();
+            else setPrevious();
+        });
     } else {
         area.append(notice);
     }

site/src/scripts/components/search.js

@@ -1,5 +1,5 @@
 import { config } from "../config.js";
-import { onWindowResize, splitArray, debounce, removeWindowResize, elementExists, scrollToElement, onKeyPress } from "../functions.js";
+import { onWindowResize, splitArray, debounce, removeWindowResize, elementExists, scrollToElement, onKeyPress, onSwipe } from "../functions.js";
 import { preloadImages, getNonCachedImages, unloadImages } from "../cache.js";
 import { getSearchResults } from "../api/search.js";
 import { watchContent } from "./watch.js";
@@ -323,6 +323,11 @@ function initializeSearch(area, placeholder) {
     previous.addEventListener("click", setPrevious);
     next.addEventListener("click", setNext);
 
+    onSwipe(area, function (right) {
+        if (right) setNext();
+        else setPrevious();
+    });
+
     clear.addEventListener("click", onClear);
     input.addEventListener("input", clearCheck);
     input.addEventListener("input", debouncedOnInput);

site/src/scripts/components/watch.js

@@ -1,7 +1,7 @@
 import { getQuery, onQueryChange, setQuery, removeQuery } from "../query.js";
 import { setModal, showModal, changeHeaderText, hideModal } from "./modal.js";
 import { getDetails } from "../api/details.js";
-import { elementExists, onWindowResize, removeWindowResize, splitArray, getCenteringDirection, onKeyPress, promiseTimeout } from "../functions.js";
+import { elementExists, onWindowResize, removeWindowResize, splitArray, getCenteringDirection, onKeyPress, promiseTimeout, onSwipe } from "../functions.js";
 import { config, providers, proxies, proxy as proxyConfig } from "../config.js";
 import { getProvider, setProvider } from "../store/provider.js";
 import { preloadImages, getNonCachedImages, unloadImages } from "../cache.js";
@@ -1173,6 +1173,11 @@ function modal(info, recommendationImages) {
         castPrevious.addEventListener("click", setCastPrevious);
         castNext.addEventListener("click", setCastNext);
 
+        onSwipe(castCards, function (right) {
+            if (right) setCastNext();
+            else setCastPrevious();
+        });
+
         castTitle.append(castControl);
         cast.append(castCards);
     } else {
@@ -1185,6 +1190,11 @@ function modal(info, recommendationImages) {
         reviewsPrevious.addEventListener("click", setReviewPrevious);
         reviewsNext.addEventListener("click", setReviewNext);
 
+        onSwipe(reviewCards, function (right) {
+            if (right) setReviewNext();
+            else setReviewPrevious();
+        });
+
         reviewsTitle.append(reviewsControl);
         reviews.append(reviewCards);
     } else {

site/src/scripts/functions.js

@@ -1,3 +1,54 @@
+export function onSwipe(element, callback) {
+    let startX, startY, endX, endY;
+    let touchStart, touchMove, touchEnd;
+
+    function remove() {
+        element.removeEventListener("touchstart", touchStart);
+        element.removeEventListener("touchmove", touchMove);
+        element.removeEventListener("touchend", touchEnd);
+    }
+
+    touchStart = function(e) {
+        if (!elementExists(element)) return remove();
+
+        startX = e.touches[0].clientX;
+        startY = e.touches[0].clientY;
+    };
+
+    touchMove = function(e) {
+        if (!elementExists(element)) return remove();
+        
+        const currentX = e.touches[0].clientX;
+        const currentY = e.touches[0].clientY;
+
+        const deltaX = currentX - startX;
+        const deltaY = currentY - startY;
+
+        if (Math.abs(deltaX) > Math.abs(deltaY)) {
+            e.preventDefault();
+        }
+    };
+
+    touchEnd = function(e) {
+        if (!elementExists(element)) return remove();
+
+        endX = e.changedTouches[0].clientX;
+        endY = e.changedTouches[0].clientY;
+
+        const deltaX = endX - startX;
+        const deltaY = endY - startY;
+
+        if (Math.abs(deltaX) > Math.abs(deltaY)) {
+            if (deltaX < 0) callback(true);
+            else callback(false);
+        }
+    };
+
+    element.addEventListener("touchstart", touchStart);
+    element.addEventListener("touchmove", touchMove);
+    element.addEventListener("touchend", touchEnd);
+}
+
 export function promiseTimeout(timeout) {
     return new Promise((res) => setTimeout(res, timeout));
 }