日志回放ok

static/js/angular-route.min.js

+/*
+ AngularJS v1.2.5
+ (c) 2010-2014 Google, Inc. http://angularjs.org
+ License: MIT
+*/
+(function(h,e,A){'use strict';function u(w,q,k){return{restrict:"ECA",terminal:!0,priority:400,transclude:"element",link:function(a,c,b,f,n){function y(){l&&(l.$destroy(),l=null);g&&(k.leave(g),g=null)}function v(){var b=w.current&&w.current.locals;if(b&&b.$template){var b=a.$new(),f=w.current;g=n(b,function(d){k.enter(d,null,g||c,function(){!e.isDefined(t)||t&&!a.$eval(t)||q()});y()});l=f.scope=b;l.$emit("$viewContentLoaded");l.$eval(h)}else y()}var l,g,t=b.autoscroll,h=b.onload||"";a.$on("$routeChangeSuccess",
+v);v()}}}function z(e,h,k){return{restrict:"ECA",priority:-400,link:function(a,c){var b=k.current,f=b.locals;c.html(f.$template);var n=e(c.contents());b.controller&&(f.$scope=a,f=h(b.controller,f),b.controllerAs&&(a[b.controllerAs]=f),c.data("$ngControllerController",f),c.children().data("$ngControllerController",f));n(a)}}}h=e.module("ngRoute",["ng"]).provider("$route",function(){function h(a,c){return e.extend(new (e.extend(function(){},{prototype:a})),c)}function q(a,e){var b=e.caseInsensitiveMatch,
+f={originalPath:a,regexp:a},h=f.keys=[];a=a.replace(/([().])/g,"\\$1").replace(/(\/)?:(\w+)([\?|\*])?/g,function(a,e,b,c){a="?"===c?c:null;c="*"===c?c:null;h.push({name:b,optional:!!a});e=e||"";return""+(a?"":e)+"(?:"+(a?e:"")+(c&&"(.+?)"||"([^/]+)")+(a||"")+")"+(a||"")}).replace(/([\/$\*])/g,"\\$1");f.regexp=RegExp("^"+a+"$",b?"i":"");return f}var k={};this.when=function(a,c){k[a]=e.extend({reloadOnSearch:!0},c,a&&q(a,c));if(a){var b="/"==a[a.length-1]?a.substr(0,a.length-1):a+"/";k[b]=e.extend({redirectTo:a},
+q(b,c))}return this};this.otherwise=function(a){this.when(null,a);return this};this.$get=["$rootScope","$location","$routeParams","$q","$injector","$http","$templateCache","$sce",function(a,c,b,f,n,q,v,l){function g(){var d=t(),m=r.current;if(d&&m&&d.$$route===m.$$route&&e.equals(d.pathParams,m.pathParams)&&!d.reloadOnSearch&&!x)m.params=d.params,e.copy(m.params,b),a.$broadcast("$routeUpdate",m);else if(d||m)x=!1,a.$broadcast("$routeChangeStart",d,m),(r.current=d)&&d.redirectTo&&(e.isString(d.redirectTo)?
+c.path(u(d.redirectTo,d.params)).search(d.params).replace():c.url(d.redirectTo(d.pathParams,c.path(),c.search())).replace()),f.when(d).then(function(){if(d){var a=e.extend({},d.resolve),c,b;e.forEach(a,function(d,c){a[c]=e.isString(d)?n.get(d):n.invoke(d)});e.isDefined(c=d.template)?e.isFunction(c)&&(c=c(d.params)):e.isDefined(b=d.templateUrl)&&(e.isFunction(b)&&(b=b(d.params)),b=l.getTrustedResourceUrl(b),e.isDefined(b)&&(d.loadedTemplateUrl=b,c=q.get(b,{cache:v}).then(function(a){return a.data})));
+e.isDefined(c)&&(a.$template=c);return f.all(a)}}).then(function(c){d==r.current&&(d&&(d.locals=c,e.copy(d.params,b)),a.$broadcast("$routeChangeSuccess",d,m))},function(c){d==r.current&&a.$broadcast("$routeChangeError",d,m,c)})}function t(){var a,b;e.forEach(k,function(f,k){var p;if(p=!b){var s=c.path();p=f.keys;var l={};if(f.regexp)if(s=f.regexp.exec(s)){for(var g=1,q=s.length;g<q;++g){var n=p[g-1],r="string"==typeof s[g]?decodeURIComponent(s[g]):s[g];n&&r&&(l[n.name]=r)}p=l}else p=null;else p=null;
+p=a=p}p&&(b=h(f,{params:e.extend({},c.search(),a),pathParams:a}),b.$$route=f)});return b||k[null]&&h(k[null],{params:{},pathParams:{}})}function u(a,c){var b=[];e.forEach((a||"").split(":"),function(a,d){if(0===d)b.push(a);else{var e=a.match(/(\w+)(.*)/),f=e[1];b.push(c[f]);b.push(e[2]||"");delete c[f]}});return b.join("")}var x=!1,r={routes:k,reload:function(){x=!0;a.$evalAsync(g)}};a.$on("$locationChangeSuccess",g);return r}]});h.provider("$routeParams",function(){this.$get=function(){return{}}});
+h.directive("ngView",u);h.directive("ngView",z);u.$inject=["$route","$anchorScroll","$animate"];z.$inject=["$compile","$controller","$route"]})(window,window.angular);

static/js/record.js

+/**
+ * Created by liuzheng on 3/25/16.
+ */
+'use strict';
+
+var NgApp = angular.module('NgApp', ['ngRoute']);
+NgApp.config(['$httpProvider', function ($httpProvider) {
+    $httpProvider.defaults.transformRequest = function (obj) {
+        var str = [];
+        for (var p in obj) {
+            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
+        }
+        return str.join("&");
+    };
+    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
+    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
+    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+    $httpProvider.defaults.headers.post = {
+        'Content-Type': 'application/x-www-form-urlencoded'
+    }
+}]);
+NgApp.controller('TerminalRecordCtrl', function ($scope, $http) {
+    $http.post(window.location.href).success(function (data) {
+        var toggle = true;
+        var totalTime = 0;
+        var TICK = 33;
+        var TIMESTEP = 33;
+        var time = 33;
+        var timer;
+        var pos = 0;
+
+        // Thanks http://stackoverflow.com/a/2998822
+        function zeroPad(num, size) {
+            var s = "0" + num;
+            return s.substr(s.length - size);
+        }
+
+        $scope.scrub = function () {
+            var setPercent = document.getElementById('scrubber').value;
+            time = (setPercent / 100) * totalTime;
+            $scope.restart(time);
+        };
+
+        function buildTimeString(millis) {
+            var hours = zeroPad(Math.floor(millis / (1000 * 60 * 60)), 2);
+            millis -= hours * (1000 * 60 * 60);
+            var minutes = zeroPad(Math.floor(millis / (1000 * 60)), 2);
+            millis -= minutes * (1000 * 60);
+            var seconds = zeroPad(Math.floor(millis / 1000), 2);
+            return hours + ':' + minutes + ':' + seconds;
+        }
+
+        function advance() {
+            document.getElementById('scrubber').value =
+                Math.ceil((time / totalTime) * 100);
+            document.getElementById("beforeScrubberText").innerHTML = buildTimeString(time);
+            for (; pos < timelist.length; pos++) {
+                if (timelist[pos] * 1000 <= time) {
+                    term.write(data[timelist[pos]]);
+                } else {
+                    break;
+                }
+            }
+
+            if (pos >= timelist.length) {
+                clearInterval(timer);
+            }
+
+            time += TIMESTEP;
+        }
+
+        $scope.pause = function (test) {
+            if (!toggle && test) {
+                return;
+            }
+            if (toggle) {
+                clearInterval(timer);
+                toggle = !toggle;
+            } else {
+                timer = setInterval(advance, TICK);
+                toggle = !toggle;
+            }
+        };
+
+        $scope.setSpeed = function () {
+            var speed = document.getElementById('speed').value;
+            if (speed == 0) {
+                TIMESTEP = TICK;
+            } else if (speed < 0) {
+                TIMESTEP = TICK / -speed;
+            } else {
+                TIMESTEP = TICK * speed;
+            }
+        };
+
+        $scope.restart = function (millis) {
+            clearInterval(timer);
+            term.reset();
+            time = millis;
+            pos = 0;
+            toggle = true;
+            timer = setInterval(advance, TICK);
+        };
+
+        var rc = textSize();
+        var term = new Terminal({
+            rows: rc.y,
+            cols: rc.x,
+            useStyle: true,
+            screenKeys: true
+        });
+        var timelist = [];
+        for (var i in data) {
+            totalTime = totalTime > i ? totalTime : i;
+            timelist.push(i);
+        }
+        timelist = timelist.sort();
+        totalTime = totalTime * 1000;
+        document.getElementById("afterScrubberText").innerHTML = buildTimeString(totalTime);
+        term.open(document.getElementById('terminal'));
+        timer = setInterval(advance, TICK);
+    })
+
+})
+
+function textSize() {
+    var charSize = getCharSize();
+    var windowSize = getwindowSize();
+    var size = {
+        x: Math.floor(windowSize.width / charSize.width)
+        , y: Math.floor(windowSize.height / charSize.height)
+    };
+    if (size.x > 150)size.x = 150;
+    if (size.y > 35)size.y = 35;
+    size.x = 140;
+    size.y = 30;
+    return size;
+}
+function getCharSize() {
+    var $span = $("<span>", {text: "qwertyuiopasdfghjklzxcvbnm"});
+    $('body').append($span);
+    var size = {
+        width: $span.outerWidth() / 30
+        , height: $span.outerHeight() * 1.1
+    };
+    $span.remove();
+    return size;
+}
+function getwindowSize() {
+    var e = window,
+        a = 'inner';
+    if (!('innerWidth' in window )) {
+        a = 'client';
+        e = document.documentElement || document.body;
+    }
+    return {width: e[a + 'Width'] - 300, height: e[a + 'Height'] - 120};
+}

templates/jlog/record.html

+<!DOCTYPE html>
+<html ng-app="NgApp">
+<head lang="en">
+    <title>Jumpserver 录像回放</title>
+    <script type="application/javascript" src='/static/js/jquery-2.1.1.js'></script>
+    <script type="application/javascript" src='/static/js/angular.min.js'></script>
+    <script type="application/javascript" src='/static/js/angular-route.min.js'></script>
+    <script type="application/javascript" src='/static/js/term.js'></script>
+</head>
+<body>
+{% csrf_token %}
+<div ng-controller="TerminalRecordCtrl">
+    <input type="button" value="Play/Pause" ng-click="pause(false);"/>
+    <input type="button" value="Restart" ng-click="restart(1);"/>
+    <span id="beforeScrubberText"></span>
+    <input id="scrubber" type="range" value="0" min=0 max=100
+           ng-mousedown="pause(true);" ng-mouseup="scrub();"/>
+    <span id="afterScrubberText"></span>
+    -5x <input id="speed" type="range" value="0" min=-5 max=5
+               ng-mouseup="setSpeed();"/> +5x
+    <div id="terminal"></div>
+</div>
+    <script type="application/javascript" src='/static/js/record.js'></script>
+
+</body>
+</html>
\ No newline at end of file