fp/packages/next/app/components/timestamps-list.tsx

73 lines
2.8 KiB
TypeScript
Raw Normal View History

2024-01-20 16:16:14 +00:00
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 (
<div className="timestamps mb-5">
{hasTimestamps && (
timestamps.map((ts: ITimestamp) => (
<p key={ts.id}>
{/* {JSON.stringify(ts, null, 2)}<br/><br/><br/> */}
<Link
href={`?t=${formatUrlTimestamp(ts.attributes.time)}`}
>
{formatTimestamp(ts.attributes.time)}
</Link>{' '}
<span className="mr-2">{ts.attributes.tag.data.attributes.name}</span>
{authContext?.authData && isCreatedByMeRecently(authContext.authData, ts) && (
<button
onClick={() => {
if (!authContext?.authData) return;
deleteTimestamp(authContext.authData, ts.id);
setTimestamps((prevTimestamps: ITimestamp[]) => prevTimestamps.filter((timestamp) => timestamp.id !== ts.id));
}}
className={`button icon`}
>
<FontAwesomeIcon icon={faTrash}></FontAwesomeIcon>
</button>
)}
</p>
))
)}
{!hasTimestamps && <div className="ml-5"><p><i>This VOD has no timestamps</i></p></div>}
</div>
);
}