<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Annotate a line animation</title>
    <link rel="stylesheet" href="svganim.css">
    <style media="screen">
        body {
            /* background: black;
            color: white */
            background: lightgray;
        }

        body.player{
            background: rgb(39, 40, 41);;
        }

        #sample,
        svg {
            position: absolute;
            top: 20px;
            left: 20px;
            width: calc(100% - 40px);
            height: calc(100% - 200px);
            font-family: sans-serif;
            z-index: 2;
            /* background: white; */
            /* border: solid 2px lightgray; */
        }

        body.player svg{
            height: calc(100% - 40px);
            background-color: white;
        }

        #wrapper {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: none;
        }

        img {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }



        .playlist img {
            position: static;
            width: 250px;
            height: 250px;
            background: white;
            display: block;
        }

        .help {
            position: absolute;
            right: 0;
            top: 10px;
            left: 70px;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            font-size: 6pt;
        }

        body:not(.help) .help{
            display: none;
        }

        .help li {
            display: inline-block;
            color: gray;
            margin-right: 10px;
            flex-grow: 1;
        }

        .help .key {
            padding: 2px;
            background-color: aliceblue;
            border: solid 1px black;
            color: black;
            border-radius: 4px;
        }

        #interface:not(.selected-annotation) .help .esc1 {
            display: none;
        }

        #interface.selected-annotation .help .esc2 {
            display: none;
        }
    </style>
    <link rel="stylesheet" href="assets/nouislider-15.5.0.css">
    <link rel="stylesheet" href="core.css">
</head>

<body>
    <div id='interface'>
        <ul class="help">
            <li><span class='key'>Space</span> play/pause</li>
            <li><span class='key'>Shift</span> + <span class='key'>&RightArrow;</span> Skip 1s</li>
            <li><span class='key'>Shift</span> + <span class='key'>Ctrl</span> + <span class='key'>&RightArrow;</span>
                Skip 10s</li>
            <li><span class='key'>i / o</span> set in/out-point</li>
            <li><span class='key'>Shift</span> + <span class='key'>i / o</span> Jump to in/out-point</li>
            <li><span class='key'>&LeftArrow; / &RightArrow;</span> Shift selected point 1s</li>
            <li><span class='key'>PgUp/Dwn</span> Shift selected point 10s</li>
            <li class="esc"><span class='key'>Esc</span> <span class='esc1'>Deselect annotation</span><span
                    class="esc2">reset in & out-points</span></li>
        </ul>
    </div>
    <script src="assets/nouislider-15.5.0.js"></script>
    <script src="assets/wNumb-1.2.0.min.js"></script>
    <script src="annotate.js"></script>
    <script src="playlist.js"></script>
    <script type='text/javascript'>
        let ann;
        if (location.search) {
            const params = new URLSearchParams(location.search);
            const is_player = !!parseInt(params.get('player'));
            const crop_to_fit = !!parseInt(params.get('crop'));
            if(is_player) {
                document.body.classList.add('player');
            } else {
                document.body.classList.add('annotator');
            }
            ann = new Annotator(
                document.getElementById("interface"),
                "tags.json",
                params.get('file'),
                {is_player: is_player, crop_to_fit: crop_to_fit}
            );
        } else {
            const playlist = new Playlist(document.getElementById("interface"), '/files/');
        }


        // Hack to disable hardware media keys starting/stopping the audio playback
        navigator.mediaSession.setActionHandler('play', function () { /* Code excerpted. */ });
        navigator.mediaSession.setActionHandler('pause', function () { /* Code excerpted. */ });
        navigator.mediaSession.setActionHandler('seekbackward', function () { /* Code excerpted. */ });
        navigator.mediaSession.setActionHandler('seekforward', function () { /* Code excerpted. */ });
        navigator.mediaSession.setActionHandler('previoustrack', function () { /* Code excerpted. */ });
        navigator.mediaSession.setActionHandler('nexttrack', function () { /* Code excerpted. */ });
        navigator.mediaSession.setActionHandler('playpause', function () { /* Code excerpted. */ });
    </script>
</body>

</html>