diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index ce640fe9..35477faa 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -735,10 +735,6 @@ "device": "device", "enabled": "Casting to device 🎬" }, - "skipIntro": { - "feedback": "Was this skip helpful?", - "skip": "Skip Intro" - }, "menus": { "downloads": { "button": "Attempt download", diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 5aa08d87..ad256aa0 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -83,8 +83,6 @@ export enum Icons { RELOAD = "reload", REPEAT = "repeat", PLUS = "plus", - THUMBS_UP = "thumbsUp", - THUMBS_DOWN = "thumbsDown", } export interface IconProps { @@ -185,8 +183,6 @@ const iconList: Record = { reload: ``, repeat: ``, plus: ``, - thumbsUp: ``, - thumbsDown: ``, }; export const Icon = memo((props: IconProps) => { diff --git a/src/components/player/atoms/SkipIntroButton.tsx b/src/components/player/atoms/SkipIntroButton.tsx index 3b030f74..2f95158e 100644 --- a/src/components/player/atoms/SkipIntroButton.tsx +++ b/src/components/player/atoms/SkipIntroButton.tsx @@ -1,6 +1,5 @@ import classNames from "classnames"; -import { useCallback, useEffect, useRef, useState } from "react"; -import { useTranslation } from "react-i18next"; +import { useCallback } from "react"; import { Icon, Icons } from "@/components/Icon"; import { useSkipTracking } from "@/components/player/hooks/useSkipTracking"; @@ -51,14 +50,6 @@ export function SkipIntroButton(props: { const display = usePlayerStore((s) => s.display); const meta = usePlayerStore((s) => s.meta); const { addSkipEvent } = useSkipTracking(20); - const [showFeedback, setShowFeedback] = useState(false); - const [feedbackSubmitted, setFeedbackSubmitted] = useState(false); - const timeoutRef = useRef | null>(null); - const pendingSkipDataRef = useRef<{ - startTime: number; - endTime: number; - skipDuration: number; - } | null>(null); const showingState = shouldShowSkipButton(time, props.skipTime); const animation = showingState === "hover" ? "slide-up" : "fade"; let bottom = "bottom-[calc(6rem+env(safe-area-inset-bottom))]"; @@ -68,19 +59,20 @@ export function SkipIntroButton(props: { : "bottom-[calc(3rem+env(safe-area-inset-bottom))]"; } - const { t } = useTranslation(); + const handleSkip = useCallback(() => { + if (typeof props.skipTime === "number" && display) { + const startTime = time; + const endTime = props.skipTime; + const skipDuration = endTime - startTime; - const reportSkip = useCallback( - (confidence: number) => { - if (!pendingSkipDataRef.current) return; - - const { startTime, endTime, skipDuration } = pendingSkipDataRef.current; + display.setTime(props.skipTime); + // Add manual skip event with high confidence (user explicitly clicked skip intro) addSkipEvent({ startTime, endTime, skipDuration, - confidence, + confidence: 0.95, // High confidence for explicit user action meta: meta ? { title: @@ -95,99 +87,15 @@ export function SkipIntroButton(props: { : undefined, }); - // eslint-disable-next-line no-console - console.log( - `Skip intro reported: ${skipDuration}s total, confidence: ${confidence}`, - ); - - // Clean up - pendingSkipDataRef.current = null; - setShowFeedback(false); - setFeedbackSubmitted(true); - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - timeoutRef.current = null; - } - }, - [addSkipEvent, meta], - ); - - const handleThumbsUp = useCallback(() => { - reportSkip(0.95); - }, [reportSkip]); - - const handleThumbsDown = useCallback(() => { - reportSkip(0.7); - }, [reportSkip]); - - const handleSkip = useCallback(() => { - if (typeof props.skipTime === "number" && display) { - const startTime = time; - const endTime = props.skipTime; - const skipDuration = endTime - startTime; - - display.setTime(props.skipTime); - - // Store skip data temporarily - pendingSkipDataRef.current = { - startTime, - endTime, - skipDuration, - }; - - // Show feedback UI - setShowFeedback(true); - setFeedbackSubmitted(false); - - // Start 10-second timeout - timeoutRef.current = setTimeout(() => { - // Hide component immediately to prevent flicker - setShowFeedback(false); - setFeedbackSubmitted(true); - reportSkip(0.8); - }, 10000); - // eslint-disable-next-line no-console console.log(`Skip intro button used: ${skipDuration}s total`); } - }, [props.skipTime, display, time, reportSkip]); - - // Reset feedback state when content changes - useEffect(() => { - setShowFeedback(false); - setFeedbackSubmitted(false); - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - timeoutRef.current = null; - } - pendingSkipDataRef.current = null; - }, [meta?.tmdbId]); - - // Cleanup timeout on unmount - useEffect(() => { - return () => { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - }; - }, []); - + }, [props.skipTime, display, time, addSkipEvent, meta]); if (!props.inControl) return null; let show = false; - // Don't show anything if feedback has been submitted - if (feedbackSubmitted) { - show = false; - } else if (showFeedback) { - // Always show feedback UI when active - show = true; - } else if (showingState === "always") { - // Show skip button when always visible - show = true; - } else if (showingState === "hover" && props.controlsShowing) { - // Show skip button on hover when controls are showing - show = true; - } + if (showingState === "always") show = true; + else if (showingState === "hover" && props.controlsShowing) show = true; if (status !== "playing") show = false; return ( @@ -198,52 +106,17 @@ export function SkipIntroButton(props: { >
- {showFeedback ? ( - <> -
- {t("player.skipIntro.feedback")} -
-
- - -
- - ) : ( - - )} +
);