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

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

        #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; */
        }

        svg .background {
            fill: white
        }

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

        path {
            fill: none;
            stroke: gray;
            stroke-width: 1mm;
            stroke-linecap: round;
        }

        g.before path {
            opacity: 0.5;
            stroke: gray !important;
        }

        g.after path,
        path.before_in {
            opacity: .1;
            stroke: gray !important;
        }

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

        .gray {
            position: absolute;
            background: rgba(255, 255, 255, 0.7);
        }

        
        .controls--playback{
            /* display:flex; */
        }

        .timecode{
            position: absolute;
            right: 100%;
            width: 5%;
            font-size:8px;
        }

        .controls--playback input[type='range'] {
            /* position: absolute;
            z-index: 100;
            bottom: 0;
            left: 0;
            right: 0; */
            width: 100%;

        }

        .controls button.paused, .controls button.playing{
            position: absolute;
            left: 100%;
            width: 30px;
        }
        .controls button.paused::before{
            content: '⏵';
        }
        .controls button.playing::before{
            content: '⏸';
        }

        .controls {
            position: absolute !important;
            z-index: 100;
            bottom: 10px;
            left: 5%;
            right: 0;
            width: 90%;
        }

        .scrubber {}

        .tags {
            line-height: 40px;
            display: flex;
            flex-direction: row;
            padding: 0;
            margin: 0;
        }

        .tags .tag {
            display: block;
            padding: 5px;
            border: solid 1px darkgray;
            flex-grow: 1;
            text-align: center;
        }

        .tags li{
         display: block;   
        }
        .tags .subtags{
            padding:0;
            font-size: 80%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .tags .subtags .tag{
            padding: 2px;
        }

        .tags .tag:hover {
            cursor: pointer;
            background: darkgray;
        }

        .tags .tag.selected {
            background: #3FB8AF;
        }

        .tags .tag.annotation-rm {
            /* display: none; */
            overflow: hidden;
            color: red;
            font-size: 30px;
            width: 0;
            flex-grow: 0;
            padding: 5px 0;
            transition: width .3s;
            pointer-events: none;
            border: none;
            direction: rtl;
            /* hide behind bar, instead into nothing */
        }

        .selected-annotation .tags .tag.annotation-rm {
            color: red;
            display: block;
            width: 30px;
            pointer-events: all;
        }

        .tags .tag span {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            vertical-align: middle;
            border-radius: 5px;
        }
        .tags .subtags .tag span{
            width: 10px;
            height: 10px;
            margin-right: 2px;

        }

        .annotations {
            height: 30px;
            /* border: solid 1px darkgray; */
            position: relative;
        }

        .annotations>div {
            opacity: .4;
            background: lightseagreen;

            position: absolute;
            bottom: 0;
            top: 0;
        }

        .annotations>div:hover,
        .annotations>div.selected {
            opacity: 1;
            cursor: pointer;
        }

        .unsaved::before {
            content: '*';
            color: red;
            display: inline-block;
            text-align: center;
            font-size: 30px;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .saved::before {
            content: '\2713';
            display: inline-block;
            color: green;
            text-align: center;
            font-size: 30px;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .noUi-horizontal .noUi-touch-area {
            cursor: ew-resize;
        }
        #interface .noUi-horizontal .noUi-tooltip{
            /* tooltips go below the buttons */
            bottom:auto;
            top:110%;
        }

        .audioconfig{
            z-index: 9;
            background:black;
            color: white;
            position: relative;
            width: 100px; /* as wide as audio controls only */
            overflow: hidden;
            white-space: nowrap;
        }
        .audioconfig:hover{
            width: auto;
        }
        .audioconfig select, .audioconfig input{
            margin:10px;
        }
        audio{
            vertical-align: middle;
            width: 100px; /* hides seek head */
        }

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

    </style>
    <link rel="stylesheet" href="assets/nouislider-15.5.0.css">
    <link rel="stylesheet" href="core.css">
</head>

<body>
    <div id='interface'>
    </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) {
            ann = new Annotator(
                document.getElementById("interface"),
                "tags.json",
                location.search.substring(1)
            );
        } 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. */ });
    </script>
</body>

</html>