<!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'>→</span> Skip 1s</li> <li><span class='key'>Shift</span> + <span class='key'>Ctrl</span> + <span class='key'>→</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'>← / →</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>