clean up the layout system slightly

remove shared folder

brought back some of the old camera and isbn code

Author: Txuritan

dist/main.js

@@ -1,6 +1,8 @@
 import m from "@/mithril";
 import * as Toast from "@/mithril-toast";
 
+// import { Camera } from "^/camera";
+
 import AddBulk from "./pages/add-bulk";
 import AddScan from "./pages/add-scan";
 import AddSearch from "./pages/add-search";
@@ -10,8 +12,6 @@ import { Tags } from "./pages/tags";
 import { Wishlist } from "./pages/wishlist";
 import { Settings } from "./pages/settings";
 
-import Layout from "./shared/layout";
-
 declare global {
 	interface Sissix {
 		gitHash: string | undefined;
@@ -21,14 +21,6 @@ declare global {
 	const SISSIX: Sissix;
 }
 
-const wrapper = (comp: m.ClosureComponent): m.RouteResolver => {
-	return {
-		render: () => {
-			return m(Layout, m(comp));
-		},
-	};
-};
-
 const registerServiceWorker = async () => {
 	let registration: ServiceWorkerRegistration | undefined | null = null;
 	let installingRegistration: ServiceWorker | undefined | null = null;
@@ -78,10 +70,15 @@ window.addEventListener("load", () => {
 		"/add/bulk": AddBulk,
 		"/add/scan": AddScan,
 		"/add/search": AddSearch,
-		"/bookshelves": wrapper(Bookshelves),
-		"/bookshelves/:bookshelfId": wrapper(Bookshelf),
-		"/tags": wrapper(Tags),
-		"/wishlist": wrapper(Wishlist),
-		"/settings": wrapper(Settings),
+		"/bookshelves": Bookshelves,
+		"/bookshelves/:bookshelfId": Bookshelf,
+		"/tags": Tags,
+		"/wishlist": Wishlist,
+		"/settings": Settings,
 	});
+
+	// TODO: have a setup screen where it walks the user though so they don't get a camera use popup the moment they open the app
+	(async () => {
+		// Camera.requestPermission();
+	})();
 });

dist/main.js.map

@@ -9,10 +9,10 @@ import { Err, type Result } from "../../utils";
 
 import BookshelfEntry from "../../components/bookshelf";
 
+import Layout from "pages/layout";
+
 export const Bookshelves: m.ClosureComponent = () => {
-	let bookshelves: Result<Bookshelf[]> = Err(
-		new Error("bookshelves didn't load"),
-	);
+	let bookshelves: Result<Bookshelf[]> = Err(new Error("bookshelves didn't load"));
 
 	let fabOpen = false;
 
@@ -26,29 +26,30 @@ export const Bookshelves: m.ClosureComponent = () => {
 			m.redraw();
 		},
 		view: (vnode) => {
-			return bookshelves.match({
-				ok: (bookshelves) => {
-					return m("div", { class: "bg-zinc-100 px-4" }, [
-						m(Fab, { kind: "tertiary", icon: m(Add), onclick: toggle }, [
-							fabOpen ? [
-								m("div", { class: "absolute right-6 bottom-40 flex flex-col gap-2" }, [
-									m(Button, { size: "small", icon: m(Add) }, "Bulk Scan"),
-									m(Button, { size: "small", icon: m(Add) }, "Scan"),
-									m(Button, { size: "small", icon: m(Add) }, "Add"),
-								]),
-							] : null,
+			return bookshelves
+				.map((bookshelves) => {
+					const fabButtons = [
+						m("div", { class: "absolute right-6 bottom-40 flex flex-col gap-2" }, [
+							m(Button, { size: "small", icon: m(Add) }, "Bulk Scan"),
+							m(Button, { size: "small", icon: m(Add) }, "Scan"),
+							m(Button, { size: "small", icon: m(Add) }, "Add"),
 						]),
-						m("div", { class: "flex flex-col py-4 gap-y-2 md:gap-y-4" }, [
-							bookshelves.map((bookshelf) => {
-								return m(BookshelfEntry, { entry: bookshelf }, []);
-							}),
+					];
+
+					const fab = m(Fab, { kind: "tertiary", icon: m(Add), onclick: toggle }, [fabOpen ? fabButtons : null]);
+
+					return m(Layout, [
+						m("div", { class: "bg-zinc-100 px-4" }, [
+							fab,
+							m("div", { class: "flex flex-col py-4 gap-y-2 md:gap-y-4" }, [
+								bookshelves.map((bookshelf) => {
+									return m(BookshelfEntry, { entry: bookshelf }, []);
+								}),
+							]),
 						]),
 					]);
-				},
-				err: (err) => {
-					return null;
-				},
-			});
+				})
+				.unwrapOr(null);
 		},
 	};
 };

dist/service-worker.js

@@ -10,34 +10,24 @@ import { Settings } from "@/mithril-material-3/icon/settings";
 export const Layout: m.ClosureComponent = (_vnode) => {
 	return {
 		view: (vnode) => {
+			const create = (href: string, icon: m.ClosureComponent, label: string) => ({
+				href: href,
+				icon: icon,
+				label: label,
+			});
+
 			const items = [
-				{
-					href: "bookshelves",
-					icon: Shelves,
-					label: "Bookshelves",
-				},
-				{
-					href: "tags",
-					icon: Label,
-					label: "Tags",
-				},
-				{
-					href: "wishlist",
-					icon: ShoppingMode,
-					label: "Wishlist",
-				},
-				{
-					href: "/settings",
-					icon: Settings,
-					label: "Settings",
-				},
+				create("/bookshelves", Shelves, "Bookshelves"),
+				create("/tags", Label, "Tags"),
+				create("/wishlist", ShoppingMode, "Wishlist"),
+				create("/settings", Settings, "Settings"),
 			];
 
-			return m.fragment({}, [
+			return [
 				m(Toast.Drawer),
 				m("div", { class: "flex-1 overflow-y-scroll" }, vnode.children),
 				m(Nav, { items: items }, []),
-			]);
+			];
 		},
 	};
 };

dist/service-worker.js.map

@@ -3,10 +3,12 @@ import m from "@/mithril";
 import { Label } from "../../components/base/label";
 import { Select, Option } from "../../components/base/select";
 
+import Layout from "pages/layout";
+
 export const Settings: m.ClosureComponent = () => {
 	return {
 		view: (_vnode) => {
-			return [
+			return m(Layout, [
 				m("h2", { class: "text-2xl m-2" }, "Camera"),
 				m("div", { class: "p-2 mx-2 rounded-md shadow-sm" }, [
 					m(Label, { for: "settings-camera-selection" }, "Camera Selection"),
@@ -29,7 +31,7 @@ export const Settings: m.ClosureComponent = () => {
 						m(Option, "Hipchat"),
 					]),
 				]),
-			];
+			]);
 		},
 	};
 };

src/main.ts

@@ -0,0 +1,9 @@
+import m from "@/mithril";
+
+export const Setup: m.ClosureComponent = (vnode) => {
+	return {
+		view: (vnode) => {
+			return m("h1", "Tags!");
+		},
+	};
+};

src/pages/bookshelves/index.ts

@@ -1,9 +1,11 @@
 import m from "@/mithril";
 
+import Layout from "pages/layout";
+
 export const Tags: m.ClosureComponent = (vnode) => {
 	return {
 		view: (vnode) => {
-			return m("h1", "Tags!");
+			return m(Layout, [m("h1", "Tags!")]);
 		},
 	};
 };

src/shared/layout.ts src/pages/layout.ts

@@ -2,13 +2,15 @@ import m from "@/mithril";
 import { Fab } from "@/mithril-material-3/fab";
 import { Add } from "@/mithril-material-3/icon/add";
 
+import Layout from "pages/layout";
+
 export const Wishlist: m.ClosureComponent = (vnode) => {
 	return {
 		view: (vnode) => {
-			return [
+			return m(Layout, [
 				m(Fab, { kind: "tertiary", icon: m(Add) }, []),
 				m("h1", "Wishlist!"),
-			];
+			]);
 		},
 	};
 };

src/pages/settings/index.ts

@@ -1,3 +1,5 @@
+import type { RecursivePartial } from "./utils";
+
 interface State {
     settings: Settings;
 }
@@ -22,7 +24,7 @@ interface SearchSettings {
     worldcatToken: string | null;
 }
 
-export const state: State = {
+const state: State = {
     settings: {
         camera: {
             list: [],
@@ -39,3 +41,9 @@ export const state: State = {
 export const loadState = () => {};
 
 export const saveState = () => {};
+
+export const getState = (): State => {
+    return state;
+};
+
+export const setState = (state: RecursivePartial<State>) => {};

src/pages/setup/index.ts

@@ -0,0 +1,79 @@
+import * as ZXing from "@/zxing";
+
+import { wrapAsyncError } from ".";
+
+const codeReader = new ZXing.BrowserMultiFormatReader();
+
+export const getDevices = () => {
+	return wrapAsyncError("unable to get list of cameras", async () => await codeReader.listVideoInputDevices());
+};
+
+export const getName = (label: string) => {
+	const clean = label.replace(/\s*\([0-9a-f]+(:[0-9a-f]+)?\)\s*$/, "");
+
+	return clean || label || null;
+};
+
+const ensureAccess = async () => {
+	return await wrapAsyncError("unable to ensure camera access", async () => {
+		const access = await navigator.mediaDevices.getUserMedia({ video: true });
+		for (const stream of access.getVideoTracks()) {
+			stream.stop();
+		}
+
+		// https://stackoverflow.com/a/69468263
+		// Firefox requires getting media devices after stopping all streams
+		await navigator.mediaDevices.getUserMedia({ video: true });
+	});
+};
+
+export const stopAll = async () => {
+	const access = await navigator.mediaDevices.getUserMedia({ video: true });
+	for (const stream of access.getVideoTracks()) {
+		stream.stop();
+	}
+};
+
+export class Camera {
+	id: string;
+	name: string | null;
+
+	constructor(id: string, name: string | null) {
+		this.id = id;
+		this.name = name;
+	}
+
+	public static async requestPermission() {
+		const tracks = await navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: "environment" } });
+		for (const track of tracks.getTracks()) {
+			track.stop();
+		}
+	}
+
+	public static async getCameras() {
+		await ensureAccess();
+
+		return (await navigator.mediaDevices.enumerateDevices())
+			.filter((d) => d.kind === "videoinput")
+			.map((d) => new Camera(d.deviceId, getName(d.label)));
+	}
+
+	public async start(camera: Camera) {
+		return await wrapAsyncError("unable to start selected camera", async () => {
+			return await navigator.mediaDevices.getUserMedia({
+				audio: false,
+				video: {
+					deviceId: camera.id,
+				},
+			});
+		});
+	}
+
+	public async stop(stream: MediaStream) {
+		for (const track of stream.getVideoTracks()) {
+			track.stop();
+		}
+	}
+}
+
+export class Scanner {}