sb/src/App.vue

<template>

    <header>
    <h1>Story Baobab</h1>
    <div class="intro">
        Drag and drop images and video to sketch a print-friendly storyboard.
    </div>
    </header>

    <main>
        
    <div class="insert-scene">
        <input v-model="title" placeholder="Title">
        <button @click="add">Add Scene</button>
    </div>
    <div class="load-scene">
        <label > Open
        <input type="file" multiple @change="load">
        </label>
    </div>




        <SceneEntry v-for="scene in scenes" :title="scene.title" :series="scene.series"/>

    </main>
</template>

<script setup>

import SceneEntry from './components/SceneEntry.vue'
import {ref} from 'vue'

const scenes = ref([])
const title = ref('')
const add = () => {
    scenes.value.push({
        title: title.value,
        series: []
        })
    title.value = ""
    }

const load = (e) => {
    let files = e.target.files
    Promise.all(files.forEach(async (file) =>{
       const reader = new FileReader()
       reader.readAsText(file)
       reader.onloadend = (e) => {
        if (e.target.readyState == FileReader.DONE) {
           try {
            let scene = JSON.parse(reader.result)
            // convert base64 to blob to avoid DOM lag during drag and drop
            // bc base64 bloat the html document so much!
            scenes.value.push(scene)
           } catch (e) {
            console.log(e)
           }
        }
       }
    })
    )
}

</script>

<style>

header {
    margin: 32px;
}

header h1 {
    margin: 0;
}

main {
    margin: 32px;
}

.insert-scene {
    display: inline-flex;
    gap: 8px;
    padding: 16px;
    background-color: #F3F3F3;
}

.load-scene {
    display: inline-flex;
    gap: 8px;
    padding: 16px;

}

.load-scene input {
    position: absolute;
    top: -10000px;
}

.load-scene label {
    background-color: #fff;
    border: 1px solid currentColor;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
}

.load-scene label:hover {
    background-color: #393939;
    border-color: #393939;
    color: #fff;
}

@media print {

    header, .insert-scene, .load-scene, .add-shot {
        display: none
    }



}


</style>