<template>
    <div id="viewer"></div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import { Viewer } from 'photo-sphere-viewer';
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';

interface Props {
    src: string,
};

const props = withDefaults(defineProps<Props>(), {

});

onMounted(() => {
    new Viewer({
        container: document.querySelector('#viewer') as any,
        panorama: props.src,
        size: {
            width: '100%' as any,
            height: '100%' as any,
        },
        navbar: [
            'zoom',
            'move',
            'caption',
            'fullscreen',
        ],
        lang: {
            zoomOut: '',
            zoomIn: '',
            move: '',
            fullscreen: '',
        }
    });
})
</script>

<style lang="scss" scoped></style>