import React, { useContext, useState, useEffect } from "react"; import { IVod } from "@/lib/vods"; import { ITimestamp, deleteTimestamp } from "@/lib/timestamps"; import { formatTimestamp, formatUrlTimestamp, } from "@/lib/dates"; import Link from 'next/link'; import { faClock, faLink, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { AuthContext, IAuthData } from "./auth"; import { isWithinInterval, subHours, Interval } from 'date-fns'; import { useRouter } from 'next/navigation'; export interface ITimestampsProps { vod: IVod; timestamps: ITimestamp[]; setTimestamps: Function; } function isCreatedByMeRecently(authData: IAuthData, ts: ITimestamp) { if (!authData?.user) return false; if (authData.user.id !== ts.attributes.creatorId) return false; const last24H: Interval = { start: subHours(new Date(), 24), end: new Date() }; return isWithinInterval(new Date(ts.attributes.createdAt), last24H); } export function TimestampsList({ vod, timestamps, setTimestamps }: ITimestampsProps): React.JSX.Element { // const throttledTimestampFetch = throttle(getRawTimestampsForVod); const authContext = useContext(AuthContext); const hasTimestamps = timestamps.length > 0; return (
{hasTimestamps && ( timestamps.map((ts: ITimestamp) => (

{/* {JSON.stringify(ts, null, 2)}


*/} {formatTimestamp(ts.attributes.time)} {' '} {ts.attributes.tag.data.attributes.name} {authContext?.authData && isCreatedByMeRecently(authContext.authData, ts) && ( )}

)) )} {!hasTimestamps &&

This VOD has no timestamps

}
); }