const flipbookPages = flipbookEl.querySelectorAll('.flip-page');

    const opts = {
        backgroundColor: "#000",
        boxColor: "#000",
      }
      
    
    const book = {
        numPages: () => flipbookPages.length,
        getPage: (n, cb) => {
            const cache = []
            if(!n || n > flipbookPages.length) return cb()
            if(cache[n]) return cb(null, cache[n])
        
            const img = new Image()
            img.src = flipbookPages[n-1].src
            img.addEventListener("load", () => {
              cache[n] = {
                img,
                num: n,
                width: img.width,
                height: img.height,
              }
              cb(null, cache[n])
            }, false)
        },
    }

    flipbook(book, 'flipbook', opts, (err, viewer) => {
        if(err) console.error(err);
    
        console.log('Number of pages: ' + viewer.page_count);
        viewer.on('seen', n => console.log('page number: ' + n));
    
        flipNext.onclick = () => viewer.flip_forward();
        flipPrev.onclick = () => viewer.flip_back();
        // zoom.onclick = () => viewer.zoom();
    
    });

template>
    <Pagesection>
        <div id="flipbookApp" class="bg-openpeople-grey min-h-screen"></div>
        <button id="flipbookNext">next</button>
        <button id="flipbookPrev">prev</button>
        <button id="flipbookZoom">zoom</button>
    </Pagesection>
</template>

<script setup>
import { init as flipbook } from 'flipbook-viewer';

const app = document.getElementById('flipbookApp')
const next = document.getElementById('flipbookNext')
const prev = document.getElementById('flipbookPrev')
const zoom = document.getElementById('flipbookZoom')


onMounted(async () => {
    flipbook("/fp.pdf", app, (err, viewer) => {
        if (err) console.error(err);

        console.log('Number of pages: ' + viewer.page_count);
        viewer.on('seen', n => console.log('page number: ' + n));

        next.onclick = () => viewer.flip_forward();
        prev.onclick = () => viewer.flip_back();
        zoom.onclick = () => viewer.zoom();
    });
})
</script>

ReferenceError: self is not defined
    at Object.<anonymous> (/Users/gerard/dev/openpeople-content/node_modules/flipbook-viewer/dist/flipbook-viewer.js:1:209)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:528:24)
    at async __instantiateModule__ (file:///Users/gerard/dev/openpeople-content/.nuxt/dist/server/server.mjs:25281:3)