Slide show from PhotoCircle

This repo creates a slideshow from the photos and videos in a PhotoCircle

To extract the data, open the Webapp, then download and extract all files of a circle into data/files.

On the web, set the "Media Sorting" option to "Standard", then click on the first photo, then run this script in the Web console:

window.allData = new Map()

function extract() {
  const indexCount = document.querySelector('.index-count').textContent
  const index = Number(indexCount.split(' ')[0])

  const reactionCount = document.querySelector('.reactionCount')?.textContent

  const comments = document.querySelectorAll('.comments-content')
  const first = comments[comments.length - 1]
  let legend = ''
  if (first && first.querySelector('.comments-name').textContent == 'Claire Bastien') {
    legend = first.querySelector('.comments-body').textContent
  }

  window.allData.set(index, {reactionCount, legend})
}

clearInterval(window.intervalId)
window.intervalId = setInterval(extract, 100)

window.clickIntervalId = setInterval(function () {
  document.querySelector('.button-icon.button-color-default.button-theme-dark.right-button.css-1yimjzb').click()
}, 2e3)

This will cycle through all the items to extract the first comment from Claire and the number of reactions.

Once it reaches the last item, run this script to export the metadata:

items = Array.from(window.allData.entries()).map(([index, data]) => ({
  index,
  reactionCount: data.reactionCount ? Number(data.reactionCount) : 0,
  legend: data.legend
}))
metadata = {items}

console.log(JSON.stringify(metadata))

Then copy the string content's and paste into data/metadata.json.

Finally, run cargo run to produce the slideshow file in data/slideshow.html