merge commit from master

src/components/PlaylistInfo.tsx

@@ -4,7 +4,7 @@ import { IconMaterialSymbolsCheckCircle } from "./Icons";
 type IPlaylistInfo = {
 	currentVid: IVidWithCustom;
 	playlist: validPlaylistSlugs;
-	isSavingSingle: boolean;
+	isSavingSingle: string[];
 };
 export function PlaylistInfo({
 	currentVid,
@@ -26,7 +26,7 @@ export function PlaylistInfo({
 						<IconMaterialSymbolsCheckCircle className="text-[#339E35] w-full h-full" />
 					</span>
 				)}
-				{isSavingSingle && (
+				{currentVid.id && isSavingSingle.includes(currentVid.id) && (
 					<div role="status">
 						<svg
 							aria-hidden="true"

src/components/Settings.tsx

@@ -34,6 +34,7 @@ type ISettings = {
 	setCurrentBook: Dispatch<SetStateAction<IVidWithCustom[]>>;
 	setShapedPlaylist: Dispatch<SetStateAction<IPlaylistData | undefined>>;
 	setCurrentVid: Dispatch<SetStateAction<IVidWithCustom>>;
+	setIsSavingSingle: Dispatch<SetStateAction<string[]>>;
 };
 export function Settings(props: ISettings) {
 	const modal = useRef<HTMLIonModalElement>(null);
@@ -114,6 +115,7 @@ export function Settings(props: ISettings) {
 		}
 		function breakLoop() {
 			if (window.dotAppStopAllDownloads) {
+				props.setIsSavingSingle([]);
 				return true;
 			}
 			if (bookDownloadRequestIsAborted()) {
@@ -132,7 +134,7 @@ export function Settings(props: ISettings) {
 				let progressAmount = fetchNum / allExpectedChunks.length;
 				if (progressAmount === 1) {
 					// artificially set the progress at just below 100 to finish up this last bit of code in which we are cleaning caches / combining the blob parts etc;
-					progressAmount = 0.98;
+					progressAmount = 0.99;
 				}
 				const updatedAmount = {
 					started: true,
@@ -293,6 +295,7 @@ export function Settings(props: ISettings) {
 						currentBook={props.currentBook}
 						currentVid={props.currentVid}
 						setShapedPlaylist={props.setShapedPlaylist}
+						setIsSavingSingle={props.setIsSavingSingle}
 					/>
 				</div>
 			</IonModal>

src/components/Settings/BulkListing.tsx

@@ -38,6 +38,7 @@ type IDownloadListing = {
 	setCurrentVid: Dispatch<SetStateAction<IVidWithCustom>>;
 	downloadProgress: downloadProgressInfo | undefined;
 	setShapedPlaylist: Dispatch<SetStateAction<IPlaylistData | undefined>>;
+	setIsSavingSingle: Dispatch<SetStateAction<string[]>>;
 };
 export function BulkListing({
 	playlistData,
@@ -49,6 +50,7 @@ export function BulkListing({
 	currentVid,
 	downloadProgress,
 	setShapedPlaylist,
+	setIsSavingSingle,
 }: IDownloadListing) {
 	const { t } = useTranslation();
 	const [booksSelected, setBooksSelected] = useState<Array<IVidWithCustom[]>>();
@@ -138,6 +140,10 @@ export function BulkListing({
 
 		for await (const vidChapter of flattenedBooks) {
 			if (skipVidDownload(vidChapter)) continue;
+			setIsSavingSingle((prev) => {
+				// biome-ignore lint/style/noNonNullAssertion:
+				return [...prev, ...flattenedBooks.map((vid) => vid.id!)];
+			});
 			if (!vidChapter.savedSources?.poster || !vidChapter.savedSources?.video) {
 				setDownloadProgress({
 					amount: 0,
@@ -214,7 +220,7 @@ export function BulkListing({
 					size="small"
 					fill="outline"
 					color="primary"
-					disabled={!booksSelected?.length}
+					disabled={!booksSelected?.length && !downloadProgress?.started}
 					className="text-surface"
 					onClick={() => {
 						if (downloadProgress?.started) {
@@ -246,6 +252,7 @@ export function BulkListing({
 						booksToCancel={booksToCancel}
 						setBooksToCancel={setBooksToCancel}
 						clearBookFromFs={clearBookFromFs}
+						setIsSavingSingle={setIsSavingSingle}
 					/>
 				))}
 			</ul>

src/components/Settings/DownloadBookItem.tsx

@@ -25,6 +25,7 @@ type BookToDownloadProps = {
 	booksToCancel: (string | undefined)[];
 	setBooksToCancel: Dispatch<SetStateAction<(string | undefined)[]>>;
 	clearBookFromFs(videos: IVidWithCustom[]): void;
+	setIsSavingSingle: Dispatch<SetStateAction<string[]>>;
 };
 function bookIsFullyDownloaded(book: IVidWithCustom[]) {
 	return book.every((vid) => !!vid.savedSources?.video);
@@ -153,6 +154,9 @@ export function BookToDownload(props: BookToDownloadProps) {
 								const vidsWithIds = book.value
 									.filter((v) => !!v.id)
 									.map((v) => v.id) as string[];
+								props.setIsSavingSingle((prev) =>
+									prev.filter((id) => !vidsWithIds.includes(id)),
+								);
 								if (
 									window.dotAppBooksToCancel &&
 									Array.isArray(window.dotAppBooksToCancel) &&

src/lib/Ui.tsx

@@ -463,6 +463,7 @@ export async function fetchBcData(playlist: validPlaylistSlugs) {
 
 		// Always refresh savedData with freshest from api right now, but do merge in anythign previously saved. We can look at doing the caching stuff again later, but for now, prioritize freshness
 		if (savedData) {
+			// NOTE: THERE WAS SOME BANDWIDTH SAVING HERE BY ONLY REFRESHING AFTER SO LONG, BUT WE'RE JUST GONNA EAT THE BANDWIDTH FOR A PLAYLIST FETCH HERE AND NOT HAVE ANYTHING STALE
 			// if (savedData.refreshBy > Date.now()) {
 			//   return savedData;
 			// }
@@ -471,14 +472,16 @@ export async function fetchBcData(playlist: validPlaylistSlugs) {
 			//   savedData.expiresBy > Date.now()
 			// ) {
 			// This is a background update. If it fails while offline or whatever, it
-			const mergedWithSavedSource = await mergeInPreviouslySavedVids({
+			mergeInPreviouslySavedVids({
 				existingPlaylistData: savedData.formattedVideos,
 				playlist,
 			});
-			return mergedWithSavedSource;
+			return savedData;
+			// }
 			// }
 			// }
 		}
+		// if we are fetching fresh, we have nothing cached and don't need to worry about mergeing in previously saved vids
 		const data = await fetchBcApiEndpoint(playlist);
 		if (!data) throw new Error("fetch failed");
 		mutateTimeStampBcResponse(data);

src/lib/storage.ts

@@ -22,8 +22,8 @@ export function makeVidSaver(
 	vid: IVidWithCustom,
 ) {
 	// NOTE: We could change this, but 10 seems like a reasonsable amount for avoiding timeouts.
-	const increment = 1024 * 1000 * 10; //1 kilobyte * 1000 (= 1mb) * 10 = (10mb)
-	// const increment = 10 * 10 * 1024; //10mb
+	// const increment = 1024 * 1000 * 10; //1 kilobyte * 1000 (= 1mb) * 10 = (10mb)
+	const increment = 1024 * 300; //1kb * 250 = 300kb
 	const mp4FileName = `${vid.id}_mp4`;
 
 	function getAggregatedBlobPath() {

src/pages/Playlist.tsx

@@ -67,7 +67,7 @@ function Playlist() {
 	const [jumpingForwardAmount, setJumpingForwardAmount] =
 		useState<jumpParam>(null);
 	const [jumpingBackAmount, setJumpingBackAmount] = useState<jumpParam>(null);
-	const [isSavingSingle, setIsSavingSingle] = useState(false);
+	const [isSavingSingle, setIsSavingSingle] = useState<string[]>([]);
 	const alertRef: any = useRef(null);
 
 	/*// #===============  PAGE FUNCTIONS   =============   */
@@ -230,20 +230,21 @@ function Playlist() {
 			vidJsPlayer.off("ended", autoPlayToNextBook);
 			vidJsPlayer.one("ended", autoPlayToNextBook);
 			// MAYBE: I HAD ERROR HANDLING FOR  EXPIRED SRC errors on media not supported, but now fetchAndSetup no already fetches the latest sources, but leaving here in case need to troubleshoot more later
-			// vidJsPlayer.on("error", handleVidJsError);
+			vidJsPlayer.on("error", handleVidJsError);
 		}
 	}, [currentVid, vidJsPlayer]);
 
-	// async function handleVidJsError() {
-	// if (!vidJsPlayer) return;
-	// const err = vidJsPlayer.error();
-	// if (!err) return;
-	// if (err.code === 4) {
-	// 4 is mdia src not supported.
-	// await fetchAndSetup();
-	// }
-	// console.error(event);
-	// }
+	async function handleVidJsError() {
+		if (!vidJsPlayer) return;
+		const err = vidJsPlayer.error();
+		if (!err) return;
+		console.error({ err });
+		if (err.code === 4) {
+			// 4 is mdia src not supported.
+			// await fetchAndSetup();
+		}
+		// console.error(event);
+	}
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <I'm purposely running this effect only on playlist cause the src we'll only shift from blob to https if the shapedPlaylist that is saved to fs is edited.  The fs version of the shapedPlaylist is the real source of truth for what the UI should show more than the state is>
 	useEffect(() => {
@@ -350,7 +351,7 @@ function Playlist() {
 		const commonAction = (action: "DOWNLOAD" | "DELETE") => {
 			const settingsEl = document.querySelector("#settingsRef");
 			if (settingsEl) {
-				const adjustPlayerSpeedEvent = new CustomEvent(
+				const manageSingleVideoStorage = new CustomEvent(
 					"manageSingleVideoStorage",
 					{
 						detail: {
@@ -359,9 +360,10 @@ function Playlist() {
 						},
 					},
 				);
-				settingsEl.dispatchEvent(adjustPlayerSpeedEvent);
-				if (action === "DOWNLOAD") {
-					setIsSavingSingle(true);
+				settingsEl.dispatchEvent(manageSingleVideoStorage);
+				const curId = currentVid.id;
+				if (action === "DOWNLOAD" && curId) {
+					setIsSavingSingle((prev) => [...prev, curId]);
 				}
 			}
 		};
@@ -395,9 +397,9 @@ function Playlist() {
 
 	useEffect(() => {
 		if (currentVid.savedSources?.video) {
-			setIsSavingSingle(false);
+			setIsSavingSingle((prev) => prev.filter((id) => id !== currentVid.id));
 		}
-	}, [currentVid.savedSources?.video]);
+	}, [currentVid.savedSources?.video, currentVid.id]);
 
 	/*//# ===============  MARKUP   =============   */
 	return (
@@ -423,6 +425,7 @@ function Playlist() {
 								playlistSlug={playlistInfo.playlist}
 								setShapedPlaylist={setShapedPlaylist}
 								setCurrentBook={setCurrentBook}
+								setIsSavingSingle={setIsSavingSingle}
 							/>
 						)}
 					</div>