July 24 2024

<VeltComments minimapPosition="left" />

<style>
    .relative-container {
        position: relative;
    }

    #scrollableElement {
        width: 100%;
        height: 200px; /* or any value */
        overflow: auto;
    }
</style>

<div className="relative-container">
    <VeltCommentsMinimap targetScrollableElementId="scrollableElement" position="left" />
    <div id="scrollableElement">
        {/* scrollable content */}
    </div>
</div>

<velt-comments minimap-position="left"></velt-comments>

<style>
    .relative-container {
        position: relative;
    }

    #scrollableElement {
        width: 100%;
        height: 200px; /* or any value */
        overflow: auto;
    }
</style>

<div class="relative-container">
    <velt-comments-minimap target-scrollable-element-id="scrollableElement" position="left"></velt-comments-minimap>
    <div id="scrollableElement">
        <!-- scrollable content -->
    </div>
</div>

<VeltReactionTool videoPlayerId={videoPlayerId} onReactionToolClick={() => onReactionToolClick()} />

<velt-reaction-tool video-player-id="videoPlayerId"></velt-reaction-tool>
<script>
    const reactionToolTag = document.querySelector('velt-reaction-tool');
    reactionToolTag.addEventListener('onReactionToolClick', (event) => {
        console.log('reaction tool clicked', event.detail);
    });
</script>