move session playback to analysis

Author: enzok

web/analysis/templatetags/analysis_tags.py

@@ -11,6 +11,7 @@
 from django.template.defaultfilters import register
 from django.utils.html import escape
 from django.utils.safestring import mark_safe
+from uuid import uuid3, NAMESPACE_DNS
 
 
 @register.filter("is_string")
@@ -238,3 +239,9 @@ def _print(lvl, s):
         result.write('<pre style="margin: 0">' + escape(str(obj)) + "</pre>")
 
     return mark_safe(result.getvalue())
+
+
+@register.filter(name="playback_url")
+def playback_url(task_id):
+    session_id = uuid3(NAMESPACE_DNS, str(task_id)).hex[:16]
+    return f"{task_id}_{session_id}"

web/templates/analysis/overview/_playback.html

@@ -1,10 +1,39 @@
-<section id="playback">
-    <h4>Session Playback</h4>
-	<div>
+<link href="{{ STATIC_URL }}css/playback.css" rel="stylesheet" type="text/css"/>
+<script src="{{ STATIC_URL }}js/playback.js"></script>
+<script src="{{ STATIC_URL }}js/guacamole-common-js/1.4.0-all.min.js"></script>
+<a class="accordion-toggle" data-toggle="collapse" aria-expanded="false" href="#playback"><h4>Session Playback</h4></a>
+<div id="playback" class="collapse" >
    	{% if analysis.info.options.nohuman %}
-		<button class="btn btn-secondary" onclick='window.open(window.location.origin + "/guac/playback/{{analysis.info.id}}")';><span class="fas fa-play"></span> Playback</button>
+	   	<div id="terminal" style="width: 100%; height: 100%;">
+			<!--
+				Guacamole recording player
+			    http://www.apache.org/licenses/LICENSE-2.0
+			-->
+			<div id="player">
+				<!-- Player display -->
+				<div id="display">
+					<div class="notification-container">
+						<div class="seek-notification">
+							<p>
+								Seek in progress...
+								<button id="cancel-seek">Cancel</button>
+							</p>
+						</div>
+					</div>
+				</div>
+				<!-- Player controls -->
+				<div class="controls">
+					<button id="play-pause">Play</button>
+					<input id="position-slider" type="range">
+					<span id="position">00:00</span>
+					<span>/</span>
+					<span id="duration">00:00</span>
+				</div>
+			</div>
+			<!-- -->
+			<script>initExamplePlayer("{{analysis.info.id|playback_url}}")</script>
+		</div>
     {% else %}
     	No playback available.
     {% endif %}
-	</div>
-</section>
+</div>>