useWatchHistory

import useWatchHistory from "@/hooks/useWatchHistory";

import type { ThemeSummaryCardThemeFragment } from "@/generated/graphql";

interface WatchHistoryTheme extends ThemeSummaryCardThemeFragment {
    id: number;
}

export type WatchHistory = Array<WatchHistoryTheme>;

const { history, addToHistory, clearHistory } = useWatchHistory();

import { useEffect } from "react";
import useWatchHistory from "@/hooks/useWatchHistory";

function VideoPlayer({ theme }: { theme: WatchHistoryTheme }) {
    const { addToHistory } = useWatchHistory();

    useEffect(() => {
        // Add to history when video starts playing
        addToHistory(theme);
    }, [theme, addToHistory]);

    return (
        <video src={theme.video?.link} controls />
    );
}

import useWatchHistory from "@/hooks/useWatchHistory";

function WatchHistoryPage() {
    const { history, clearHistory } = useWatchHistory();

    if (history.length === 0) {
        return <div>No watch history yet</div>;
    }

    // Display most recent first
    const recentHistory = [...history].reverse();

    return (
        <div>
            <div className="header">
                <h1>Watch History ({history.length})</h1>
                <button onClick={clearHistory}>Clear History</button>
            </div>
            <ul>
                {recentHistory.map((theme, index) => (
                    <li key={`${theme.id}-${index}`}>
                        <a href={`/anime/${theme.anime?.slug}`}>
                            {theme.anime?.name} - {theme.song?.title}
                        </a>
                    </li>
                ))}
            </ul>
        </div>
    );
}

import useWatchHistory from "@/hooks/useWatchHistory";

function RecentlyWatched({ limit = 5 }: { limit?: number }) {
    const { history } = useWatchHistory();

    // Get most recent items
    const recentItems = history.slice(-limit).reverse();

    if (recentItems.length === 0) {
        return null;
    }

    return (
        <section>
            <h2>Recently Watched</h2>
            <div className="recent-grid">
                {recentItems.map((theme) => (
                    <div key={theme.id} className="theme-card">
                        <img src={theme.anime?.images?.[0]?.link} alt="" />
                        <p>{theme.song?.title}</p>
                    </div>
                ))}
            </div>
        </section>
    );
}

import useWatchHistory from "@/hooks/useWatchHistory";

function ContinueWatching() {
    const { history } = useWatchHistory();

    // Get the most recent item
    const lastWatched = history[history.length - 1];

    if (!lastWatched) {
        return null;
    }

    return (
        <div className="continue-watching">
            <h3>Continue Watching</h3>
            <a href={`/anime/${lastWatched.anime?.slug}`}>
                <img src={lastWatched.anime?.images?.[0]?.link} alt="" />
                <div>
                    <p>{lastWatched.anime?.name}</p>
                    <span>{lastWatched.song?.title}</span>
                </div>
            </a>
        </div>
    );
}

import { useState } from "react";
import useWatchHistory from "@/hooks/useWatchHistory";

function HistoryManager() {
    const { history, clearHistory } = useWatchHistory();
    const [showConfirm, setShowConfirm] = useState(false);

    const handleClear = () => {
        clearHistory();
        setShowConfirm(false);
    };

    return (
        <div>
            <h2>Watch History</h2>
            <p>{history.length} items</p>
            
            {!showConfirm ? (
                <button onClick={() => setShowConfirm(true)}>
                    Clear History
                </button>
            ) : (
                <div>
                    <p>Are you sure? This cannot be undone.</p>
                    <button onClick={handleClear}>Yes, Clear</button>
                    <button onClick={() => setShowConfirm(false)}>Cancel</button>
                </div>
            )}
        </div>
    );
}

import useWatchHistory from "@/hooks/useWatchHistory";
import useLocalPlaylist from "@/hooks/useLocalPlaylist";

function ProfileStats() {
    const { history } = useWatchHistory();
    const { localPlaylist } = useLocalPlaylist();

    const uniqueAnime = new Set(
        history.map((theme) => theme.anime?.id).filter(Boolean)
    ).size;

    return (
        <div className="stats">
            <div className="stat">
                <span className="value">{history.length}</span>
                <span className="label">Themes Watched</span>
            </div>
            <div className="stat">
                <span className="value">{uniqueAnime}</span>
                <span className="label">Unique Anime</span>
            </div>
            <div className="stat">
                <span className="value">{localPlaylist.length}</span>
                <span className="label">Playlist Items</span>
            </div>
        </div>
    );
}

import { useRef, useEffect } from "react";
import useWatchHistory from "@/hooks/useWatchHistory";

function VideoPlayerWithTracking({ theme, src }: {
    theme: WatchHistoryTheme;
    src: string;
}) {
    const { addToHistory } = useWatchHistory();
    const videoRef = useRef<HTMLVideoElement>(null);
    const hasTracked = useRef(false);

    useEffect(() => {
        const video = videoRef.current;
        if (!video) return;

        const handleTimeUpdate = () => {
            // Track after 10 seconds of playback
            if (!hasTracked.current && video.currentTime > 10) {
                addToHistory(theme);
                hasTracked.current = true;
            }
        };

        video.addEventListener("timeupdate", handleTimeUpdate);
        return () => video.removeEventListener("timeupdate", handleTimeUpdate);
    }, [theme, addToHistory]);

    return <video ref={videoRef} src={src} controls />;
}