Merge branch 'main' into production

.prettierignore

@@ -0,0 +1 @@
+**/vendor/*

bookwyrm/forms.py

@@ -468,7 +468,12 @@ class Meta:
         fields = ["name", "path"]
         widgets = {
             "name": forms.TextInput(attrs={"aria-describedby": "desc_name"}),
-            "path": forms.Select(attrs={"aria-describedby": "desc_path"}),
+            "path": forms.TextInput(
+                attrs={
+                    "aria-describedby": "desc_path",
+                    "placeholder": "css/themes/theme-name.scss",
+                }
+            ),
         }
 
 

bookwyrm/settings.py

@@ -11,7 +11,7 @@
 env = Env()
 env.read_env()
 DOMAIN = env("DOMAIN")
-VERSION = "0.3.2"
+VERSION = "0.3.3"
 
 RELEASE_API = env(
     "RELEASE_API",
@@ -21,7 +21,7 @@
 PAGE_LENGTH = env("PAGE_LENGTH", 15)
 DEFAULT_LANGUAGE = env("DEFAULT_LANGUAGE", "English")
 
-JS_CACHE = "c7154efb"
+JS_CACHE = "bc93172a"
 
 # email
 EMAIL_BACKEND = env("EMAIL_BACKEND", "django.core.mail.backends.smtp.EmailBackend")

bookwyrm/static/css/bookwyrm/_all.scss

@@ -1,6 +1,7 @@
 /** Imports
  ******************************************************************************/
 @import "components/avatar";
+@import "components/barcode";
 @import "components/book_cover";
 @import "components/book_grid";
 @import "components/book_list";

bookwyrm/static/css/bookwyrm/components/_barcode.scss

@@ -0,0 +1,26 @@
+/* Barcode scanner CSS */
+#barcode-scanner {
+    position: relative;
+    max-width: 100%;
+    text-align: center;
+    height: calc(70vh - 200px);
+
+    video {
+        height: calc(70vh - 200px);
+        max-width: 100%;
+    }
+
+    canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+        height: calc(70vh - 200px);
+        max-width: 100%;
+    }
+}
+
+#barcode-camera-list {
+    float: right;
+}

bookwyrm/static/css/vendor/icons.css

@@ -149,3 +149,6 @@
 .icon-download:before {
   content: "\ea36";
 }
+.icon-barcode:before {
+  content: "\e937";
+}

bookwyrm/static/js/bookwyrm.js

@@ -1,5 +1,5 @@
 /* exported BookWyrm */
-/* globals TabGroup */
+/* globals TabGroup, Quagga */
 
 let BookWyrm = new (class {
     constructor() {
@@ -47,6 +47,10 @@ let BookWyrm = new (class {
             .forEach((node) =>
                 node.addEventListener("toggle", this.handleDetailsDropdown.bind(this))
             );
+
+        document
+            .querySelector("#barcode-scanner-modal")
+            .addEventListener("open", this.openBarcodeScanner.bind(this));
     }
 
     /**
@@ -427,9 +431,11 @@ let BookWyrm = new (class {
             });
 
             modalElement.addEventListener("keydown", handleFocusTrap);
+            modalElement.dispatchEvent(new Event("open"));
         }
 
         function handleModalClose(modalElement) {
+            modalElement.dispatchEvent(new Event("close"));
             modalElement.removeEventListener("keydown", handleFocusTrap);
             htmlElement.classList.remove("is-clipped");
             modalElement.classList.remove("is-active");
@@ -632,4 +638,174 @@ let BookWyrm = new (class {
             }
         }
     }
+
+    openBarcodeScanner(event) {
+        const scannerNode = document.getElementById("barcode-scanner");
+        const statusNode = document.getElementById("barcode-status");
+        const cameraListNode = document.querySelector("#barcode-camera-list > select");
+
+        cameraListNode.addEventListener("change", onChangeCamera);
+
+        function onChangeCamera(event) {
+            initBarcodes(event.target.value);
+        }
+
+        function toggleStatus(status) {
+            for (const child of statusNode.children) {
+                BookWyrm.toggleContainer(child, !child.classList.contains(status));
+            }
+        }
+
+        function initBarcodes(cameraId = null) {
+            toggleStatus("grant-access");
+
+            if (!cameraId) {
+                cameraId = sessionStorage.getItem("preferredCam");
+            } else {
+                sessionStorage.setItem("preferredCam", cameraId);
+            }
+
+            scannerNode.replaceChildren();
+            Quagga.stop();
+            Quagga.init(
+                {
+                    inputStream: {
+                        name: "Live",
+                        type: "LiveStream",
+                        target: scannerNode,
+                        constraints: {
+                            facingMode: "environment",
+                            deviceId: cameraId,
+                        },
+                    },
+                    decoder: {
+                        readers: [
+                            "ean_reader",
+                            {
+                                format: "ean_reader",
+                                config: {
+                                    supplements: ["ean_2_reader", "ean_5_reader"],
+                                },
+                            },
+                        ],
+                        multiple: false,
+                    },
+                },
+                (err) => {
+                    if (err) {
+                        scannerNode.replaceChildren();
+                        console.log(err);
+                        toggleStatus("access-denied");
+
+                        return;
+                    }
+
+                    let activeId = null;
+                    const track = Quagga.CameraAccess.getActiveTrack();
+
+                    if (track) {
+                        activeId = track.getSettings().deviceId;
+                    }
+
+                    Quagga.CameraAccess.enumerateVideoDevices().then((devices) => {
+                        cameraListNode.replaceChildren();
+
+                        for (const device of devices) {
+                            const child = document.createElement("option");
+
+                            child.value = device.deviceId;
+                            child.innerText = device.label.slice(0, 30);
+
+                            if (activeId === child.value) {
+                                child.selected = true;
+                            }
+
+                            cameraListNode.appendChild(child);
+                        }
+                    });
+
+                    toggleStatus("scanning");
+                    Quagga.start();
+                }
+            );
+        }
+
+        function cleanup(clearDrawing = true) {
+            Quagga.stop();
+            cameraListNode.removeEventListener("change", onChangeCamera);
+
+            if (clearDrawing) {
+                scannerNode.replaceChildren();
+            }
+        }
+
+        Quagga.onProcessed((result) => {
+            const drawingCtx = Quagga.canvas.ctx.overlay;
+            const drawingCanvas = Quagga.canvas.dom.overlay;
+
+            if (result) {
+                if (result.boxes) {
+                    drawingCtx.clearRect(
+                        0,
+                        0,
+                        parseInt(drawingCanvas.getAttribute("width")),
+                        parseInt(drawingCanvas.getAttribute("height"))
+                    );
+                    result.boxes
+                        .filter((box) => box !== result.box)
+                        .forEach((box) => {
+                            Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, {
+                                color: "green",
+                                lineWidth: 2,
+                            });
+                        });
+                }
+
+                if (result.box) {
+                    Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, {
+                        color: "#00F",
+                        lineWidth: 2,
+                    });
+                }
+
+                if (result.codeResult && result.codeResult.code) {
+                    Quagga.ImageDebug.drawPath(result.line, { x: "x", y: "y" }, drawingCtx, {
+                        color: "red",
+                        lineWidth: 3,
+                    });
+                }
+            }
+        });
+
+        let lastDetection = null;
+        let numDetected = 0;
+
+        Quagga.onDetected((result) => {
+            // Detect the same code 3 times as an extra check to avoid bogus scans.
+            if (lastDetection === null || lastDetection !== result.codeResult.code) {
+                numDetected = 1;
+                lastDetection = result.codeResult.code;
+
+                return;
+            } else if (numDetected++ < 3) {
+                return;
+            }
+
+            const code = result.codeResult.code;
+
+            statusNode.querySelector(".isbn").innerText = code;
+            toggleStatus("found");
+
+            const search = new URL("/search", document.location);
+
+            search.searchParams.set("q", code);
+
+            cleanup(false);
+            location.assign(search);
+        });
+
+        event.target.addEventListener("close", cleanup, { once: true });
+
+        initBarcodes();
+    }
 })();

bookwyrm/templates/book/book.html

@@ -12,6 +12,15 @@
 {% endblock %}
 
 {% block content %}
+{% if update_error %}
+<div class="notification is-danger is-light">
+    <span class="icon icon-x" aria-hidden="true"></span>
+    <span>
+        {% trans "Unable to connect to remote source." %}
+    </span>
+</div>
+{% endif %}
+
 {% with user_authenticated=request.user.is_authenticated can_edit_book=perms.bookwyrm.edit_book %}
 <div class="block" itemscope itemtype="https://schema.org/Book">
     <div class="columns is-mobile">

bookwyrm/templates/layout.html

@@ -56,8 +56,16 @@
                             </span>
                         </button>
                     </div>
+                    <div class="control">
+                        <button class="button" type="button" data-modal-open="barcode-scanner-modal">
+                            <span class="icon icon-barcode" title="{% trans 'Scan Barcode' %}">
+                                <span class="is-sr-only">{% trans "Scan Barcode" %}</span>
+                            </span>
+                        </button>
+                    </div>
                 </div>
             </form>
+            {% include "search/barcode_modal.html" with id="barcode-scanner-modal" %}
 
             <button type="button" tabindex="0" class="navbar-burger pulldown-menu my-4" data-controls="main_nav" aria-expanded="false">
                 <i class="icon icon-dots-three-vertical" aria-hidden="true"></i>
@@ -266,6 +274,7 @@
 <script src="{% static "js/bookwyrm.js" %}?v={{ js_cache }}"></script>
 <script src="{% static "js/localstorage.js" %}?v={{ js_cache }}"></script>
 <script src="{% static "js/status_cache.js" %}?v={{ js_cache }}"></script>
+<script src="{% static "js/vendor/quagga.min.js" %}?v={{ js_cache }}"></script>
 
 {% block scripts %}{% endblock %}