+
+ You can use API Tokens to access the Listory API directly. You can
+ find the API docs{" "}
+
+ here
+
+ .
+
+
+
-
-
- You can use API Tokens to access the Listory API directly. You can
- find the API docs{" "}
-
- here
-
- .
-
-
-
-
+
+
Manage Existing Tokens
+ {isLoading &&
}
+ {sortedTokens.length === 0 && (
+
+
Could not find any api tokens!
+
+ )}
-
Manage Existing Tokens
- {isLoading &&
}
- {sortedTokens.length === 0 && (
-
-
Could not find any api tokens!
+ {sortedTokens.length > 0 && (
+
+ {sortedTokens.map((apiToken) => (
+
+ ))}
)}
-
- {sortedTokens.length > 0 && (
-
- {sortedTokens.map((apiToken) => (
-
- ))}
-
- )}
-
-
+
);
};
@@ -97,7 +93,7 @@ const NewTokenForm: React.FC<{
createToken,
setNewToken,
setNewTokenDescription,
- ]
+ ],
);
return (
diff --git a/frontend/src/components/ImportListens.tsx b/frontend/src/components/ImportListens.tsx
new file mode 100644
index 0000000..f0699b6
--- /dev/null
+++ b/frontend/src/components/ImportListens.tsx
@@ -0,0 +1,280 @@
+import React, { useCallback, useEffect, useState } from "react";
+import Files from "react-files";
+import type { ReactFile } from "react-files";
+import {
+ useSpotifyImportExtendedStreamingHistory,
+ useSpotifyImportExtendedStreamingHistoryStatus,
+} from "../hooks/use-api";
+import { SpotifyExtendedStreamingHistoryItem } from "../api/entities/spotify-extended-streaming-history-item";
+import { ErrorIcon } from "../icons/Error";
+import { numberToPercent } from "../util/numberToPercent";
+import { Button } from "./ui/button";
+import { Table, TableBody, TableCell, TableRow } from "./ui/table";
+import { Badge } from "./ui/badge";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "./ui/card";
+import { Code } from "./ui/code";
+
+export const ImportListens: React.FC = () => {
+ return (
+ <>
+
+
+ Import Listens from Spotify Extended Streaming History
+
+
+
+
+ Here you can import your full Spotify Listen history that was exported
+ from the{" "}
+
+ Extended streaming history
+
+ .
+
+
+ The extended streaming history contains additional personally
+ identifiable data such as the IP address of the listen (which can be
+ linked to locations). To avoid saving this on the server, the data is
+ preprocessed in your web browser and only the necessary data
+ (timestamp & track ID) are sent to the server.
+
+
+ If an error occurs, you can always retry uploading the file, Listory
+ deduplicates any listens to make sure that everything is saved only
+ once.
+
+
+
+
+
+
+ );
+};
+
+interface FileData {
+ file: ReactFile;
+ status: Status;
+ error?: Error;
+}
+
+enum Status {
+ Select,
+ Import,
+ Finished,
+ Error,
+}
+
+const FileUpload: React.FC = () => {
+ // Using a map is ... meh, need to wrap all state updates in `new Map()` so react re-renders
+ const [fileMap, setFileMap] = useState
>(
+ new Map(),
+ );
+
+ const [status, setStatus] = useState(Status.Select);
+
+ const addFiles = useCallback(
+ (files: ReactFile[]) => {
+ setFileMap((_fileMap) => {
+ files.forEach((file) =>
+ _fileMap.set(file.id, { file, status: Status.Select }),
+ );
+ return new Map(_fileMap);
+ });
+ },
+ [setFileMap],
+ );
+
+ const updateFile = useCallback((data: FileData) => {
+ setFileMap((_fileMap) => new Map(_fileMap.set(data.file.id, data)));
+ }, []);
+
+ const clearFiles = useCallback(() => {
+ setFileMap(new Map());
+ }, [setFileMap]);
+
+ const { importHistory } = useSpotifyImportExtendedStreamingHistory();
+
+ const handleImport = useCallback(async () => {
+ setStatus(Status.Import);
+
+ let errorOccurred = false;
+
+ for (const data of fileMap.values()) {
+ data.status = Status.Import;
+ updateFile(data);
+
+ let items: SpotifyExtendedStreamingHistoryItem[];
+
+ // Scope so these tmp variables can be GC-ed ASAP
+ {
+ const fileContent = await data.file.text();
+
+ const rawItems = JSON.parse(
+ fileContent,
+ ) as SpotifyExtendedStreamingHistoryItem[];
+
+ items = rawItems
+ .filter(({ spotify_track_uri }) => spotify_track_uri !== null)
+ .map(({ ts, spotify_track_uri }) => ({
+ ts,
+ spotify_track_uri,
+ }));
+ }
+
+ try {
+ await importHistory(items);
+
+ data.status = Status.Finished;
+ } catch (err) {
+ data.error = err as Error;
+ data.status = Status.Error;
+
+ errorOccurred = true;
+ }
+ updateFile(data);
+ }
+
+ if (!errorOccurred) {
+ setStatus(Status.Finished);
+ }
+ }, [fileMap, importHistory, updateFile]);
+
+ return (
+
+
+ File Upload
+
+ Select endsong_XY.json files here and start the import.
+
+
+
+
+ Drop files here or click to upload
+
+
+
+ {Array.from(fileMap.values()).map((data) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+};
+
+const File: React.FC<{ data: FileData }> = ({ data }) => {
+ const hasErrors = data.status === Status.Error && data.error;
+
+ return (
+
+ {data.file.name}
+
+ {data.file.sizeReadable}
+
+
+ {data.status === Status.Select && Prepared for import!}
+ {data.status === Status.Import && Loading!}
+ {data.status === Status.Finished && Check!}
+ {hasErrors && (
+
+
+ {data.error?.message}
+
+ )}
+
+
+ );
+};
+
+const ImportProgress: React.FC = () => {
+ const {
+ importStatus: { total, imported },
+ isLoading,
+ reload,
+ } = useSpotifyImportExtendedStreamingHistoryStatus();
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ if (!isLoading) {
+ reload();
+ }
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, [isLoading, reload]);
+
+ return (
+
+
+ Import Progress
+
+ Shows how many of the submitted listens are already imported and
+ visible to you. This will take a while, and the process might halt for
+ a few minutes if we hit the Spotify API rate limit. If this is not
+ finished after a few hours, please contact your Listory administrator.
+
+
+
+
+
+
+ Imported
+
+ {imported}
+
+
+
+ Total
+
+ {total}
+
+
-
-
Listory
+
+
+
+ Listory
+
-