braid-blob 0.0.65 → 0.0.67

package/img-live-demo.html

@@ -26,7 +26,7 @@
     <h1>Braid-Blob Live Image Demo</h1>
     <p>This image updates in real-time across all connected clients.</p>
 
-    <img live droppable src="/blob.png" alt="Live updating image">
+    <img live droppable src="/blob.png">
 
     <script src="https://unpkg.com/braid-http@~1.3/braid-http-client.js"></script>
     <script src="client.js"></script>

package/img-live.js

@@ -1,7 +1,9 @@
 // Braid-Blob Live Images
 // requires client.js
 
-var live_images = new Map() // img -> { ac, client }
+;(function() {
+
+var live_images = new Map() // img -> ac
 
 function sync(img) {
     var url = img.src
@@ -17,57 +19,54 @@ function sync(img) {
             var blob = new Blob([body], { type: content_type || 'image/png' })
             img.src = URL.createObjectURL(blob)
         },
+        on_delete: () => {
+            img.src = URL.createObjectURL(new Blob([]))
+        },
         on_error: (error) => {
             console.error('Live image error for', url, error)
         }
     })
-    live_images.set(img, { ac, client })
-
-    if (img.hasAttribute('droppable'))
-        make_droppable(img)
-}
+    live_images.set(img, ac)
 
-function unsync(img) {
-    var entry = live_images.get(img)
-    if (entry) {
-        entry.ac.abort()
-        live_images.delete(img)
-    }
-}
-
-function make_droppable(img) {
-    img.addEventListener('dragenter', function(e) {
-        img.style.outline = '3px dashed #007bff'
-        img.style.outlineOffset = '3px'
-    })
+    if (img.hasAttribute('droppable')) {
+        img.addEventListener('dragenter', function() {
+            img.style.outline = '3px dashed #007bff'
+            img.style.outlineOffset = '3px'
+        })
 
-    img.addEventListener('dragleave', function(e) {
-        img.style.outline = ''
-        img.style.outlineOffset = ''
-    })
+        img.addEventListener('dragleave', function() {
+            img.style.outline = ''
+            img.style.outlineOffset = ''
+        })
 
-    img.addEventListener('dragover', function(e) {
-        e.preventDefault()
-        e.dataTransfer.dropEffect = 'copy'
-    })
+        img.addEventListener('dragover', function(e) {
+            e.preventDefault()
+            e.dataTransfer.dropEffect = 'copy'
+        })
 
-    img.addEventListener('drop', function(e) {
-        e.preventDefault()
-        img.style.outline = ''
-        img.style.outlineOffset = ''
+        img.addEventListener('drop', function(e) {
+            e.preventDefault()
+            img.style.outline = ''
+            img.style.outlineOffset = ''
 
-        var file = e.dataTransfer.files[0]
-        if (!file || !file.type.startsWith('image/')) return
+            var file = e.dataTransfer.files[0]
+            if (!file || !file.type.startsWith('image/')) return
 
-        var entry = live_images.get(img)
-        if (!entry) return
+            var reader = new FileReader()
+            reader.onload = function() {
+                client.update(reader.result, file.type)
+            }
+            reader.readAsArrayBuffer(file)
+        })
+    }
+}
 
-        var reader = new FileReader()
-        reader.onload = function() {
-            entry.client.update(reader.result, file.type)
-        }
-        reader.readAsArrayBuffer(file)
-    })
+function unsync(img) {
+    var ac = live_images.get(img)
+    if (ac) {
+        ac.abort()
+        live_images.delete(img)
+    }
 }
 
 var observer = new MutationObserver(function(mutations) {
@@ -87,6 +86,9 @@ var observer = new MutationObserver(function(mutations) {
             }
         })
         if (mutation.type === 'attributes' && mutation.target.tagName === 'IMG') {
+            // Ignore src changes to blob: URLs (our own updates)
+            if (mutation.attributeName === 'src' && mutation.target.src.startsWith('blob:'))
+                return
             if (mutation.target.hasAttribute('live'))
                 sync(mutation.target)
             else if (mutation.attributeName === 'live')
@@ -105,8 +107,10 @@ function init() {
         childList: true,
         subtree: true,
         attributes: true,
-        attributeFilter: ['live', 'droppable']
+        attributeFilter: ['live', 'droppable', 'src']
     })
 
     document.querySelectorAll('img[live]').forEach(sync)
 }
+
+})()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-blob",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "description": "Library for collaborative blobs over http using braid.",
   "author": "Braid Working Group",
   "repository": "braid-org/braid-blob",