mirror of
https://github.com/p-stream/p-stream.git
synced 2026-03-11 17:55:33 +00:00
remove the hold to edit bookmarks/watching feature
This commit is contained in:
Pas
parent
e9d8945f02
commit
a9cd1e9895
4 changed files with 4 additions and 178 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo, useRef, useState } from "react";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
|
|
@ -39,7 +39,6 @@ interface BookmarksCarouselProps {
|
|||
onShowDetails?: (media: MediaItem) => void;
|
||||
}
|
||||
|
||||
const LONG_PRESS_DURATION = 500; // 0.5 seconds
|
||||
const MAX_ITEMS_PER_SECTION = 20; // Limit items per section
|
||||
|
||||
function MediaCardSkeleton() {
|
||||
|
|
@ -92,7 +91,6 @@ export function BookmarksCarousel({
|
|||
let isScrolling = false;
|
||||
const [editing, setEditing] = useState(false);
|
||||
const removeBookmark = useBookmarkStore((s) => s.removeBookmark);
|
||||
const pressTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const backendUrl = useBackendUrl();
|
||||
const account = useAuthStore((s) => s.account);
|
||||
|
||||
|
|
@ -297,41 +295,6 @@ export function BookmarksCarousel({
|
|||
}
|
||||
};
|
||||
|
||||
const handleLongPress = () => {
|
||||
// Find the button by ID and simulate a click
|
||||
const editButton = document.getElementById("edit-button-bookmark");
|
||||
if (editButton) {
|
||||
(editButton as HTMLButtonElement).click();
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
|
||||
e.preventDefault(); // Prevent default touch action
|
||||
pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
if (pressTimerRef.current) {
|
||||
clearTimeout(pressTimerRef.current);
|
||||
pressTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
// Only trigger long press for left mouse button (button 0)
|
||||
if (e.button === 0) {
|
||||
e.preventDefault(); // Prevent default mouse action
|
||||
pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (pressTimerRef.current) {
|
||||
clearTimeout(pressTimerRef.current);
|
||||
pressTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditGroupOrder = () => {
|
||||
// Initialize with current order or default order
|
||||
if (groupOrder.length === 0) {
|
||||
|
|
@ -424,10 +387,6 @@ export function BookmarksCarousel({
|
|||
onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
|
||||
e.preventDefault()
|
||||
}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
className="relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto"
|
||||
>
|
||||
<WatchedMediaCard
|
||||
|
|
@ -502,10 +461,6 @@ export function BookmarksCarousel({
|
|||
onContextMenu={(
|
||||
e: React.MouseEvent<HTMLDivElement>,
|
||||
) => e.preventDefault()}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
className="relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto"
|
||||
>
|
||||
<WatchedMediaCard
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { EditButton } from "@/components/buttons/EditButton";
|
||||
|
|
@ -30,8 +30,6 @@ function parseGroupString(group: string): { icon: UserIcons; name: string } {
|
|||
return { icon: UserIcons.BOOKMARK, name: group };
|
||||
}
|
||||
|
||||
const LONG_PRESS_DURATION = 700; // 0.7 seconds
|
||||
|
||||
export function BookmarksPart({
|
||||
onItemsChange,
|
||||
onShowDetails,
|
||||
|
|
@ -52,8 +50,6 @@ export function BookmarksPart({
|
|||
const backendUrl = useBackendUrl();
|
||||
const account = useAuthStore((s) => s.account);
|
||||
|
||||
const pressTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const items = useMemo(() => {
|
||||
let output: MediaItem[] = [];
|
||||
Object.entries(bookmarks).forEach((entry) => {
|
||||
|
|
@ -219,38 +215,6 @@ export function BookmarksPart({
|
|||
onItemsChange(items.length > 0);
|
||||
}, [items, onItemsChange]);
|
||||
|
||||
const handleLongPress = () => {
|
||||
// Find the button by ID and simulate a click
|
||||
const editButton = document.getElementById("edit-button-bookmark");
|
||||
if (editButton) {
|
||||
(editButton as HTMLButtonElement).click();
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
|
||||
e.preventDefault(); // Prevent default touch action
|
||||
pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
if (pressTimerRef.current) {
|
||||
clearTimeout(pressTimerRef.current);
|
||||
pressTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
e.preventDefault(); // Prevent default mouse action
|
||||
pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (pressTimerRef.current) {
|
||||
clearTimeout(pressTimerRef.current);
|
||||
pressTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditGroupOrder = () => {
|
||||
// Initialize with current order or default order
|
||||
if (groupOrder.length === 0) {
|
||||
|
|
@ -327,10 +291,6 @@ export function BookmarksPart({
|
|||
onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
|
||||
e.preventDefault()
|
||||
}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
>
|
||||
<WatchedMediaCard
|
||||
media={v}
|
||||
|
|
@ -375,10 +335,6 @@ export function BookmarksPart({
|
|||
onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
|
||||
e.preventDefault()
|
||||
}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
>
|
||||
<WatchedMediaCard
|
||||
media={v}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo, useRef, useState } from "react";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { EditButton } from "@/components/buttons/EditButton";
|
||||
|
|
@ -18,8 +18,6 @@ interface WatchingCarouselProps {
|
|||
onShowDetails?: (media: MediaItem) => void;
|
||||
}
|
||||
|
||||
const LONG_PRESS_DURATION = 500; // 0.5 seconds
|
||||
|
||||
function MediaCardSkeleton() {
|
||||
return (
|
||||
<div className="relative mt-4 group cursor-default user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto">
|
||||
|
|
@ -40,7 +38,6 @@ export function WatchingCarousel({
|
|||
let isScrolling = false;
|
||||
const [editing, setEditing] = useState(false);
|
||||
const removeItem = useProgressStore((s) => s.removeItem);
|
||||
const pressTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const { isMobile } = useIsMobile();
|
||||
|
||||
|
|
@ -87,41 +84,6 @@ export function WatchingCarousel({
|
|||
const categorySlug = "continue-watching";
|
||||
const SKELETON_COUNT = 10;
|
||||
|
||||
const handleLongPress = () => {
|
||||
// Find the button by ID and simulate a click
|
||||
const editButton = document.getElementById("edit-button-watching");
|
||||
if (editButton) {
|
||||
(editButton as HTMLButtonElement).click();
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
|
||||
e.preventDefault(); // Prevent default touch action
|
||||
pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
if (pressTimerRef.current) {
|
||||
clearTimeout(pressTimerRef.current);
|
||||
pressTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
// Only trigger long press for left mouse button (button 0)
|
||||
if (e.button === 0) {
|
||||
e.preventDefault(); // Prevent default mouse action
|
||||
pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (pressTimerRef.current) {
|
||||
clearTimeout(pressTimerRef.current);
|
||||
pressTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
if (itemsLength === 0) return null;
|
||||
|
||||
return (
|
||||
|
|
@ -158,10 +120,6 @@ export function WatchingCarousel({
|
|||
onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
|
||||
e.preventDefault()
|
||||
}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
className="relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto"
|
||||
>
|
||||
<WatchedMediaCard
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { EditButton } from "@/components/buttons/EditButton";
|
||||
|
|
@ -11,8 +11,6 @@ import { useProgressStore } from "@/stores/progress";
|
|||
import { shouldShowProgress } from "@/stores/progress/utils";
|
||||
import { MediaItem } from "@/utils/mediaTypes";
|
||||
|
||||
const LONG_PRESS_DURATION = 700; // 0.7 seconds
|
||||
|
||||
export function WatchingPart({
|
||||
onItemsChange,
|
||||
onShowDetails,
|
||||
|
|
@ -26,8 +24,6 @@ export function WatchingPart({
|
|||
const [editing, setEditing] = useState(false);
|
||||
const [gridRef] = useAutoAnimate<HTMLDivElement>();
|
||||
|
||||
const pressTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const sortedProgressItems = useMemo(() => {
|
||||
const output: MediaItem[] = [];
|
||||
Object.entries(progressItems)
|
||||
|
|
@ -47,41 +43,6 @@ export function WatchingPart({
|
|||
onItemsChange(sortedProgressItems.length > 0);
|
||||
}, [sortedProgressItems, onItemsChange]);
|
||||
|
||||
const handleLongPress = () => {
|
||||
// Find the button by ID and simulate a click
|
||||
const editButton = document.getElementById("edit-button-watching");
|
||||
if (editButton) {
|
||||
(editButton as HTMLButtonElement).click();
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
|
||||
e.preventDefault(); // Prevent default touch action
|
||||
pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
if (pressTimerRef.current) {
|
||||
clearTimeout(pressTimerRef.current);
|
||||
pressTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
// Only trigger long press for left mouse button (button 0)
|
||||
if (e.button === 0) {
|
||||
e.preventDefault(); // Prevent default mouse action
|
||||
pressTimerRef.current = setTimeout(handleLongPress, LONG_PRESS_DURATION);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (pressTimerRef.current) {
|
||||
clearTimeout(pressTimerRef.current);
|
||||
pressTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
if (sortedProgressItems.length === 0) return null;
|
||||
|
||||
return (
|
||||
|
|
@ -104,10 +65,6 @@ export function WatchingPart({
|
|||
onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
|
||||
e.preventDefault()
|
||||
}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
>
|
||||
<WatchedMediaCard
|
||||
media={v}
|
||||
|
|
|
|||
Loading…
Reference in a new issue