From 4df34b28e52c8aec8dd9eb3c886cd0257805077d Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Mon, 10 Jun 2024 14:05:17 +0100
Subject: [PATCH] add highlight annotations

---
 static/css/oml.css                          |   4 +
 static/js/annotation.js                     |  11 +-
 static/js/viewer.js                         |   4 +-
 static/reader/pdf.css                       |  62 ++++
 static/reader/pdf.js                        | 308 ++++++++++++++++++--
 static/reader/pdf/toolbarButton-crop.png    | Bin 0 -> 5587 bytes
 static/reader/pdf/toolbarButton-crop.svg    |   4 +
 static/reader/pdf/toolbarButton-crop@10.png | Bin 0 -> 10905 bytes
 static/reader/pdf/toolbarButton-crop@2x.png | Bin 0 -> 5850 bytes
 9 files changed, 359 insertions(+), 34 deletions(-)
 create mode 100644 static/reader/pdf.css
 create mode 100644 static/reader/pdf/toolbarButton-crop.png
 create mode 100644 static/reader/pdf/toolbarButton-crop.svg
 create mode 100644 static/reader/pdf/toolbarButton-crop@10.png
 create mode 100644 static/reader/pdf/toolbarButton-crop@2x.png

diff --git a/static/css/oml.css b/static/css/oml.css
index 375341b..dabc0a9 100644
--- a/static/css/oml.css
+++ b/static/css/oml.css
@@ -10,6 +10,10 @@
     font-size: 14px;
     line-height: 21px;
 }
+.OMLQuote img {
+    max-width: 100%;
+    margin: auto;
+}
 
 .OMLAnnotation .OMLQuoteBackground {
     position: absolute;
diff --git a/static/js/annotation.js b/static/js/annotation.js
index 6df2090..d82a584 100644
--- a/static/js/annotation.js
+++ b/static/js/annotation.js
@@ -1,9 +1,18 @@
 'use strict';
 
+oml.SELECTION = 0
+oml.HIGHLIGHT = 1
+
 oml.ui.annotation = function(annotation, $iframe) {
+    var value = Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')
+    if (annotation.type == oml.HIGHLIGHT) {
+        let coord = annotation.coords[0].map(p => parseInt(p)).join(',')
+        let image = `/${oml.user.ui.item}/2048p${parseInt(annotation.page)},${coord}.jpg`
+        value = `<img src="${image}">`
+    }
     var $quoteText = Ox.Element()
         .addClass('OxSelectable OMLQuote')
-        .html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>'))
+        .html(value)
         .on({
             click: function(event) {
                 var id
diff --git a/static/js/viewer.js b/static/js/viewer.js
index d621087..89bc798 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -151,7 +151,7 @@ oml.ui.viewer = function() {
                         height: '100%',
                         border: 0
                     }).onMessage(function(data, event) {
-                        console.log('got', event, data)
+                        // console.log('got', event, data, data.page)
                         if (event == 'addAnnotation') {
                             addAnnotation(data);
                             var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
@@ -217,7 +217,7 @@ oml.ui.viewer = function() {
         }
         var map = {}
         map[sortKey] = function(value) {
-            return value.toString();
+            return value ? value.toString() : '';
         }
         annotations = Ox.sortBy(annotations, sortKey, map)
         oml.$ui.annotationFolder.empty();
diff --git a/static/reader/pdf.css b/static/reader/pdf.css
new file mode 100644
index 0000000..467b305
--- /dev/null
+++ b/static/reader/pdf.css
@@ -0,0 +1,62 @@
+
+.toolbarButton.cropFile::before,
+    .secondaryToolbarButton.cropFile::before {
+    mask-image: url(pdf/toolbarButton-crop.png);
+}
+.toolbarButton.embedPage::before,
+    .secondaryToolbarButton.embedPage::before {
+    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PGxpbmUgeDE9Ijg4IiB5MT0iNTYiIHgyPSIyNCIgeTI9IjEyOCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMjQiIHkxPSIxMjgiIHgyPSI4OCIgeTI9IjIwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTY4IiB5MT0iNTYiIHgyPSIyMzIiIHkyPSIxMjgiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjQ4Ii8+PGxpbmUgeDE9IjIzMiIgeTE9IjEyOCIgeDI9IjE2OCIgeTI9IjIwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48L3N2Zz48IS0teyJjb2xvciI6ImRlZmF1bHQiLCJuYW1lIjoic3ltYm9sRW1iZWQiLCJ0aGVtZSI6Im94bWVkaXVtIn0tLT4=);
+}
+@media screen and (min-resolution: 2dppx) {
+    .toolbarButton.cropFile::before,
+    .secondaryToolbarButton.cropFile::before {
+        mask-image: url(pdf/toolbarButton-crop@2x.png);
+    }
+    .toolbarButton.embedPage::before,
+    .secondaryToolbarButton.embedPage::before {
+        mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PGxpbmUgeDE9Ijg4IiB5MT0iNTYiIHgyPSIyNCIgeTI9IjEyOCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMjQiIHkxPSIxMjgiIHgyPSI4OCIgeTI9IjIwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTY4IiB5MT0iNTYiIHgyPSIyMzIiIHkyPSIxMjgiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjQ4Ii8+PGxpbmUgeDE9IjIzMiIgeTE9IjEyOCIgeDI9IjE2OCIgeTI9IjIwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48L3N2Zz48IS0teyJjb2xvciI6ImRlZmF1bHQiLCJuYW1lIjoic3ltYm9sRW1iZWQiLCJ0aGVtZSI6Im94bWVkaXVtIn0tLT4=);
+    }
+}
+
+.verticalToolbarSeparator.hiddenMediumView,
+#print,
+#secondaryPrint,
+#openFile,
+#secondaryOpenFile,
+#editorModeButtons {
+    display: none !important;
+}
+
+.page .crop-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    //background: rgba(0,0,0,0.5);
+    cursor: crosshair;
+    z-index: 100;
+}
+.page .crop-overlay.inactive {
+  pointer-events: none;
+  cursor: default;
+}
+
+.page .crop-overlay canvas {
+  width: 100%;
+  height: 100%;
+}
+.page .highlights {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    //background: rgba(0,0,0,0.5);
+    z-index: 101;
+    pointer-events: none;
+}
+.page .highlights canvas {
+  width: 100%;
+  height: 100%;
+}
diff --git a/static/reader/pdf.js b/static/reader/pdf.js
index 0a0b50b..8ac01eb 100644
--- a/static/reader/pdf.js
+++ b/static/reader/pdf.js
@@ -1,6 +1,97 @@
 var id = document.location.pathname.split('/')[1];
 var annotations = [];
 var currentPage = 1, rendered = false
+var highlightInactive = true
+var selectedAnnotation
+
+const SELECTION = 0
+const HIGHLIGHT = 1
+
+
+var div = document.createElement("div")
+div.innerHTML = `
+<button id="cropFile" class="toolbarButton cropFile hiddenLargeView" title="Highlight" tabindex="30" data-l10n-id="crop_file">
+    <span data-l10n-id="crop_file_label">Highlight</span>
+</button>
+`
+var cropFile = div.querySelector("#cropFile")
+
+document.querySelector('#toolbarViewerRight').insertBefore(cropFile, document.querySelector('#toolbarViewerRight').firstChild)
+
+// secondary menu
+div.innerHTML = `
+<button id="secondaryCropFile" class="secondaryToolbarButton visibleMediumView cropFile" title="Highlight" tabindex="50" data-l10n-id="crop">
+  <span data-l10n-id="crop_label">Highlight</span>
+</button>
+`
+var secondaryCropFile = div.querySelector("#secondaryCropFile")
+document.querySelector('#secondaryToolbarButtonContainer').insertBefore(
+    secondaryCropFile,
+    document.querySelector('#secondaryToolbarButtonContainer').firstChild
+)
+
+function initOverlay() {
+    document.querySelectorAll('#cropFile,.secondaryToolbarButton.cropFile').forEach(btn => {
+        btn.addEventListener('click', event=> {
+            if (highlightInactive) {
+                event.target.style.background = 'red'
+                highlightInactive = false
+                document.querySelectorAll('.crop-overlay.inactive').forEach(element => {
+                    element.classList.remove('inactive')
+                })
+            } else {
+                event.target.style.background = ''
+                highlightInactive = true
+                document.querySelectorAll('.crop-overlay').forEach(element => {
+                    element.classList.add('inactive')
+                })
+            }
+        })
+    })
+    PDFViewerApplication.initializedPromise.then(function() {
+        PDFViewerApplication.pdfViewer.eventBus.on("pagesinit", function(event) {
+            /*
+            document.querySelector('#viewerContainer').addEventListener('scroll', event => {
+                if (window.parent && window.parent.postMessage) {
+                    if (first) {
+                        first = false
+                    } else {
+                        window.parent.postMessage({event: 'scrolled', top: event.target.scrollTop})
+                    }
+                }
+            })
+            */
+        })
+        PDFViewerApplication.pdfViewer.eventBus.on("pagerender", function(event) {
+            var page = event.pageNumber.toString()
+            var div = event.source.div
+            var overlay = document.createElement('div')
+            overlay.classList.add('crop-overlay')
+            overlay.id = 'overlay' + page
+            if (highlightInactive) {
+                overlay.classList.add('inactive')
+            }
+            div.appendChild(overlay)
+
+            renderHighlightSelectionOverlay(overlay, id, page, event.source)
+            var highlights = document.createElement('div')
+            highlights.classList.add('highlights')
+            highlights.id = 'highlights' + page
+            var canvas = document.createElement('canvas')
+            highlights.appendChild(canvas)
+            div.appendChild(highlights)
+            renderHighlights(page)
+        })
+        PDFViewerApplication.eventBus.on('pagerendered', function(event) {
+            loadAnnotations(event.pageNumber)
+        })
+    })
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    window.PDFViewerApplication ? initOverlay() : document.addEventListener("webviewerloaded", initOverlay)
+})
+
 
 Ox.load({
     'UI': {
@@ -25,7 +116,15 @@ Ox.load({
                     document.querySelector('#viewerContainer').scrollTop = el.offsetTop + el.parentElement.offsetTop - 64;
                 }
             }, delay)
+            var oldSelection = selectedAnnotation
+            selectedAnnotation = data.id
             selectAnnotation(data.id)
+            if (oldSelection) {
+                var old = annotations.filter(function(a) { return a.id == oldSelection })[0]
+                if (old && old.type == HIGHLIGHT) {
+                    renderHighlights(old.page)
+                }
+            }
         } else if (event == 'addAnnotation') {
             createAnnotation()
         } else if (event == 'addAnnotations') {
@@ -37,7 +136,11 @@ Ox.load({
             }
             data.annotations.forEach(function(annotation) {
                 annotations.push(annotation)
-                renderAnnotation(annotation)
+                if (annotation.type == HIGHLIGHT) {
+                    renderHighlights(annotation.page)
+                } else {
+                    renderAnnotation(annotation)
+                }
             })
         } else if (event == 'removeAnnotation') {
             removeAnnotation(data.id)
@@ -75,18 +178,6 @@ window.addEventListener('mouseup', function(event) {
     }
 })
 
-function bindEvents() {
-    if (!window.PDFViewerApplication || !window.PDFViewerApplication.eventBus) {
-        setTimeout(bindEvents, 10)
-        return
-    }
-    PDFViewerApplication.eventBus.on('pagerendered', function(event) {
-        loadAnnotations(event.pageNumber)
-    })
-}
-
-bindEvents()
-
 function getHighlight() {
     var pageNumber = PDFViewerApplication.pdfViewer.currentPageNumber;
     var pageIndex = pageNumber - 1;
@@ -102,6 +193,7 @@ function getHighlight() {
     var text = selection.toString();
     var position = [pageNumber].concat(Ox.sort(selected.map(function(c) { return [c[1], c[0]]}))[0]);
     return {
+        type: SELECTION,
         page: pageNumber,
         pageLabel: PDFViewerApplication.pdfViewer.currentPageLabel,
         position: position,
@@ -134,25 +226,32 @@ function renderAnnotation(annotation) {
     }
     var pageElement = page.canvas.parentElement.parentElement;
     var viewport = page.viewport;
-    annotation.coords.forEach(function (rect) {
-        var bounds = viewport.convertToViewportRectangle(rect);
-        var el = document.createElement('div');
-        el.classList.add('oml-annotation')
-        el.classList.add('a' + annotation.id)
-        el.classList.add('page' + annotation.page)
-        el.dataset.id = annotation.id
-        el.setAttribute('style', 'position: absolute; background-color: yellow;opacity:0.3;' + 
-            'left:' + Math.min(bounds[0], bounds[2]) + 'px; top:' + Math.min(bounds[1], bounds[3]) + 'px;' +
-            'width:' + Math.abs(bounds[0] - bounds[2]) + 'px; height:' + Math.abs(bounds[1] - bounds[3]) + 'px;');
+    if (annotation.type == HIGHLIGHT) {
+        renderHighlights(annotation.page)
+    } else if (annotation.coords) {
+        pageElement.querySelectorAll('.oml-annotation').forEach(el => el.remove())
+        annotation.coords.forEach(function (rect) {
+            var bounds = viewport.convertToViewportRectangle(rect);
+            var el = document.createElement('div');
+            el.classList.add('oml-annotation')
+            el.classList.add('a' + annotation.id)
+            el.classList.add('page' + annotation.page)
+            el.dataset.id = annotation.id
+            el.setAttribute('style', 'position: absolute; background-color: yellow;opacity:0.3;' + 
+                'left:' + Math.min(bounds[0], bounds[2]) + 'px; top:' + Math.min(bounds[1], bounds[3]) + 'px;' +
+                'width:' + Math.abs(bounds[0] - bounds[2]) + 'px; height:' + Math.abs(bounds[1] - bounds[3]) + 'px;');
 
-        el.addEventListener('click', function() {
-            if (!el.classList.contains('selected')) {
-                selectAnnotation(annotation.id)
-                Ox.$parent.postMessage('selectAnnotation', {id: annotation.id})
-            }
+            el.addEventListener('click', function() {
+                if (!el.classList.contains('selected')) {
+                    selectAnnotation(annotation.id)
+                    Ox.$parent.postMessage('selectAnnotation', {id: annotation.id})
+                }
+            });
+            pageElement.appendChild(el);
         });
-        pageElement.appendChild(el);
-    });
+    } else {
+       // console.log("annotation without position", annotation)
+    }
 }
 
 function addAnnotation(annotation) {
@@ -169,6 +268,11 @@ function selectAnnotation(id) {
         g.classList.add('selected')
         g.style.backgroundColor = 'blue'
     })
+    annotations.forEach(a => {
+        if (a.id == id && a.type == HIGHLIGHT) {
+            renderHighlights(a.page)
+        }
+    })
 }
 
 function deselectAnnotation(id) {
@@ -207,7 +311,7 @@ function loadAnnotations(page) {
         e.remove()
     })
     annotations.filter(function(a) {
-        return a.page == page
+        return a.page == page && !a.type == HIGHLIGHT
     }).forEach(function(annot) {
         renderAnnotation(annot)
     })
@@ -220,3 +324,145 @@ function isInView(element) {
     var elementBottom = elementTop + $(element).height();
     return elementTop < docViewBottom && elementBottom > docViewTop;
 }
+
+function renderHighlightSelectionOverlay(root, documentId, page, source) {
+    var canvas = document.createElement('canvas')
+    root.appendChild(canvas)
+    canvas.width = canvas.clientWidth
+    canvas.height = canvas.clientHeight
+    var ctx = canvas.getContext('2d');
+    var viewerContainer = document.querySelector('#viewerContainer')
+    var bounds = root.getBoundingClientRect();
+    var base = 2048
+    var scale = Math.max(bounds.height, bounds.width) / base
+    var last_mousex = last_mousey = 0;
+    var mousex = mousey = 0;
+    var mousedown = false;
+    var p = {
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0
+    }
+    var inside = false
+
+    canvas.addEventListener('mousedown', function(e) {
+        if (inside) {
+            const coords = [
+                [p.left, p.top, p.right, p.bottom]
+            ]
+            addAnnotation({
+                type: HIGHLIGHT,
+                id: Ox.SHA1(pageNumber.toString() + JSON.stringify(p)),
+                text: "",
+                page: parseInt(page),
+                pageLabel: source.pageLabel,
+                coords: coords,
+            })
+            return
+        }
+        let bounds = root.getBoundingClientRect();
+        last_mousex = e.clientX - bounds.left;
+        last_mousey = e.clientY - bounds.top;
+        p.top = parseInt(last_mousey / scale)
+        p.left = parseInt(last_mousex / scale)
+        mousedown = true;
+    });
+
+    document.addEventListener('mouseup', function(e) {
+        if (mousedown) {
+            mousedown = false;
+            p.bottom = parseInt(mousey / scale)
+            p.right = parseInt(mousex / scale)
+
+            if (p.top > p.bottom) {
+                var t = p.top
+                p.top = p.bottom
+                p.bottom = t
+            }
+            if (p.left > p.right) {
+                var t = p.left
+                p.left = p.right
+                p.right = t
+            }
+            /*
+            var url = `${baseUrl}/documents/${documentId}/2048p${page},${p.left},${p.top},${p.right},${p.bottom}.jpg`
+            info.url = `${baseUrl}/document/${documentId}/${page}`
+            info.page = page
+            if (p.left != p.right && p.top != p.bottom) {
+                var context = formatOutput(info, url)
+                copyToClipboard(context)
+                addToRecent({
+                    document: documentId,
+                    page: parseInt(page),
+                    title: info.title,
+                    type: 'fragment',
+                    link: `${baseUrl}/documents/${documentId}/${page}`,
+                    src: url
+                })
+            }
+            */
+        }
+    });
+
+    canvas.addEventListener('mousemove', function(e) {
+        let bounds = root.getBoundingClientRect();
+        mousex = e.clientX - bounds.left;
+        mousey = e.clientY - bounds.top;
+
+        if(mousedown) {
+            ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight)
+            ctx.beginPath()
+            var width = mousex - last_mousex
+            var height = mousey - last_mousey
+            ctx.rect(last_mousex, last_mousey, width, height)
+            ctx.strokeStyle = 'black';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+        } else {
+            let py = parseInt(mousey / scale)
+            let px = parseInt(mousex / scale)
+            if (py > p.top && py < p.bottom && px > p.left && px < p.right) {
+                inside = true
+                canvas.style.cursor = 'pointer'
+                canvas.title = 'Click to add highlight'
+            } else {
+                inside = false
+                canvas.style.cursor = ''
+                canvas.title = ''
+            }
+        }
+    });
+}
+function renderHighlights(page) {
+    var pageAnnotations = annotations.filter(annotation => {
+        return annotation.type == HIGHLIGHT && (!page || (annotation.page == page))
+    })
+    pageAnnotations.forEach(annotation => {
+        let page = annotation.page
+        var canvas = document.querySelector(`#highlights${page} canvas`)
+        if (canvas) {
+            canvas.width = canvas.clientWidth
+            canvas.height = canvas.clientHeight
+            var ctx = canvas.getContext('2d');
+            var viewerContainer = document.querySelector('#viewerContainer')
+            var bounds = canvas.parentElement.getBoundingClientRect();
+            var base = 2048
+            var scale = Math.max(bounds.height, bounds.width) / base
+            ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight)
+            pageAnnotations.forEach(annotation => {
+                    ctx.beginPath()
+                    ctx.strokeStyle = annotation.id == selectedAnnotation ? 'blue' : 'yellow';
+                    ctx.lineWidth = 2;
+                    annotation.coords.forEach(coord => {
+                        const width = coord[2] - coord[0],
+                              height = coord[3] - coord[1];
+                        ctx.rect(coord[0] * scale, coord[1] * scale, width * scale, height * scale)
+                    })
+                    ctx.stroke();
+            })
+
+        }
+    })
+
+}
diff --git a/static/reader/pdf/toolbarButton-crop.png b/static/reader/pdf/toolbarButton-crop.png
new file mode 100644
index 0000000000000000000000000000000000000000..00c56d5254ca262922d54dd3da34b95047c07bf1
GIT binary patch
literal 5587
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
K;+Oh<mi}+6bULE|

literal 0
HcmV?d00001

diff --git a/static/reader/pdf/toolbarButton-crop.svg b/static/reader/pdf/toolbarButton-crop.svg
new file mode 100644
index 0000000..618195a
--- /dev/null
+++ b/static/reader/pdf/toolbarButton-crop.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="54" width="54">
+<path stroke-linejoin="round" stroke="#333" stroke-linecap="round" stroke-width="5" fill="none" d="m13.2 39 35-34.6m-45 8.1h36.6v38m-27-47v36.6h38"/>
+</svg>
diff --git a/static/reader/pdf/toolbarButton-crop@10.png b/static/reader/pdf/toolbarButton-crop@10.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cc05e5d95e4ce5d746fc2c36b98c8aaae4d0786
GIT binary patch
literal 10905
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

literal 0
HcmV?d00001

diff --git a/static/reader/pdf/toolbarButton-crop@2x.png b/static/reader/pdf/toolbarButton-crop@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..950d275800387b69f7d80d933b66ef685d98b567
GIT binary patch
literal 5850
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
VUG+E+J^%!Q?Xkf9*xb;>e*@!w#Pt9G

literal 0
HcmV?d00001