<template>
    <div>
        <v-file-input ref="file" id="myfile" accept="pdf" label="Please select a file"></v-file-input>
        <v-btn @click="loadFile">load file</v-btn>
        <canvas id="mypdfview"></canvas>
        <v-btn>Pref</v-btn>
        <span v-if="pdf && !loading">{{pdf.numPages}}</span>
        <v-btn>Next</v-btn>
        <video></video>
    </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist/webpack';
const toBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
});

export default {
    name: "PdfShare",
    props: {
      janusInit: Object,
      username: String,
      myrivid: Number,
      room: Number
    },
    data: () => ({
        pdf:null,
        pageNumber:0,
        loading:true
        }),
    mounted () {
        pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf.worker.js"
    },
    methods: {
        renderPage(pageNumber) {
            this.pdf.getPage(pageNumber).then(page => {
                console.log('Page loaded');

                var scale = 1.5;
                var viewport = page.getViewport({scale: scale});

                // Prepare canvas using PDF page dimensions
                var canvas = document.getElementById('mypdfview');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // Render PDF page into canvas context
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                var renderTask = page.render(renderContext);
                renderTask.promise.then(function () {
                    console.log('Page rendered');
                });
            });
        },
        async loadFile() {

            console.log(this.$refs.file.files)
            var file = document.querySelector('#myfile').files[0]
            var pdfdata = await toBase64(file)
            console.log(pdfdata.split('data:application/pdf;base64,')[1])

            var loadingTask = pdfjsLib.getDocument({data: atob(pdfdata.split('data:application/pdf;base64,')[1])});
            loadingTask.promise.then(pdf => {
                console.log(pdf)
                // var pageNumber = 1;
                this.pdf = pdf
                this.loading = false
                this.renderPage(1)
                this.janusInit.attach(
                    {
                        plugin: "janus.plugin.videoroom",
                        opaqueId: this.opaqueId,
                        success: this.janusPluginSuccessScreen,
                        consentDialog: this.consentDialog,
                        error: this.janusPluginError,
                        mediaState: this.mediaState,
                        webrtcState: this.webrtcState,
                        onmessage: this.janusMessageScreen,
                        onlocalstream: this.onlocalstreamScreen
                    }
                )

            })
        }
    }
}
</script>

<style scoped>

</style>
