josephj/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Thumbnails</title>
  </head>
  <body>
    <div>
      <h2>Original</h2>
      <img width="100" height="72" id="original" />
    </div>
    <div>
      <h2>EXIF Thumbnails</h2>
      <img width="100" height="72" id="img" />
    </div>
    <script>
      var appendBuffer = function (buffer1, buffer2) {
        var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength)
        tmp.set(new Uint8Array(buffer1), 0)
        tmp.set(new Uint8Array(buffer2), buffer1.byteLength)
        return tmp
      }
      const photoUrl =
        'file:///Users/josephj/Downloads/Sample Photos/Sample photos/FAM_001.JPG'

      const img = new Image()
      img.onload = () => {
        console.log('onload', new Date().getTime())
      }
      img.src = photoUrl
      document.getElementById('original').src = photoUrl

      fetch(photoUrl)
        .then((response) => {
          const reader = response.body.getReader() // chunk
          let arr = [],
            start,
            end,
            buffer,
            counter = 0
          return new ReadableStream({
            start(controller) {
              return pump()
              function pump() {
                return reader.read().then(({ done, value }) => {
                  counter += 1
                  buffer = buffer
                    ? appendBuffer(buffer, value)
                    : new Uint8Array(value)
                  //buffer = value
                  console.log('counter', counter)
                  for (var i = 2; i < buffer.length; i++) {
                    if (buffer[i] == 0xff) {
                      if (!start) {
                        if (buffer[i + 1] == 0xd8) {
                          start = i
                          console.log('>>>>> start <<<<< ', start, buffer)
                        }
                      } else {
                        if (buffer[i + 1] == 0xd9) {
                          end = i + 2
                          console.log('>>>>> end <<<<<', end, buffer)
                          break
                        }
                      }
                    }
                  }

                  if (start && end) {
                    const stream = buffer.subarray(start, end)
                    controller.enqueue(stream)
                    controller.close()
                    reader.cancel()
                    return
                  }

                  if (done) {
                    controller.close()
                    return
                  }

                  controller.enqueue(value)
                  return pump()
                })
              }
            },
          })
        })
        .then((stream) => new Response(stream))
        .then((response) => response.blob())
        .then((blob) => URL.createObjectURL(blob))
        .then((url) => {
          console.log('EXIF ready', new Date().getTime())
          document.getElementById('img').src = url
        })
    </script>
  </body>
</html>

## main.js
const {app, BrowserWindow} = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadFile('index.html')
}

app.on('ready', createWindow)
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

## preload.js
// Empty

## renderer.js
// Empty

## styles.css
/* Empty */
	<!DOCTYPE html>
	<html>
	<head>
	<title>Thumbnails</title>
	</head>
	<body>
	<div>
	<h2>Original</h2>
	<img width="100" height="72" id="original" />
	</div>
	<div>
	<h2>EXIF Thumbnails</h2>
	<img width="100" height="72" id="img" />
	</div>
	<script>
	var appendBuffer = function (buffer1, buffer2) {
	var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength)
	tmp.set(new Uint8Array(buffer1), 0)
	tmp.set(new Uint8Array(buffer2), buffer1.byteLength)
	return tmp
	}
	const photoUrl =
	'file:///Users/josephj/Downloads/Sample Photos/Sample photos/FAM_001.JPG'

	const img = new Image()
	img.onload = () => {
	console.log('onload', new Date().getTime())
	}
	img.src = photoUrl
	document.getElementById('original').src = photoUrl

	fetch(photoUrl)
	.then((response) => {
	const reader = response.body.getReader() // chunk
	let arr = [],
	start,
	end,
	buffer,
	counter = 0
	return new ReadableStream({
	start(controller) {
	return pump()
	function pump() {
	return reader.read().then(({ done, value }) => {
	counter += 1
	buffer = buffer
	? appendBuffer(buffer, value)
	: new Uint8Array(value)
	//buffer = value
	console.log('counter', counter)
	for (var i = 2; i < buffer.length; i++) {
	if (buffer[i] == 0xff) {
	if (!start) {
	if (buffer[i + 1] == 0xd8) {
	start = i
	console.log('>>>>> start <<<<< ', start, buffer)
	}
	} else {
	if (buffer[i + 1] == 0xd9) {
	end = i + 2
	console.log('>>>>> end <<<<<', end, buffer)
	break
	}
	}
	}
	}

	if (start && end) {
	const stream = buffer.subarray(start, end)
	controller.enqueue(stream)
	controller.close()
	reader.cancel()
	return
	}

	if (done) {
	controller.close()
	return
	}

	controller.enqueue(value)
	return pump()
	})
	}
	},
	})
	})
	.then((stream) => new Response(stream))
	.then((response) => response.blob())
	.then((blob) => URL.createObjectURL(blob))
	.then((url) => {
	console.log('EXIF ready', new Date().getTime())
	document.getElementById('img').src = url
	})
	</script>
	</body>
	</html>
	const {app, BrowserWindow} = require('electron')

	function createWindow () {
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true
	}
	})
	mainWindow.loadFile('index.html')
	}

	app.on('ready', createWindow)
	app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})
	app.on('activate', function () {
	if (BrowserWindow.getAllWindows().length === 0) {
	createWindow()
	}
	})