Commit b4997256 authored by Greg Rutz's avatar Greg Rutz

Add auto-scrolling of EME log window

Used an open-source angular component called "scroll-glue" to implement
auto-scrolling of the EME log window.  This ensures that you can always
see the latest logs
parent d31aba8c
(function(angular, undefined){
'use strict';
function fakeNgModel(initValue){
return {
$setViewValue: function(value){
this.$viewValue = value;
},
$viewValue: initValue
};
}
angular.module('luegg.directives', [])
.directive('scrollGlue', function(){
return {
priority: 1,
require: ['?ngModel'],
restrict: 'A',
link: function(scope, $el, attrs, ctrls){
var el = $el[0],
ngModel = ctrls[0] || fakeNgModel(true);
function scrollToBottom(){
el.scrollTop = el.scrollHeight;
}
function shouldActivateAutoScroll(){
// + 1 catches off by one errors in chrome
return el.scrollTop + el.clientHeight + 1 >= el.scrollHeight;
}
scope.$watch(function(){
if(ngModel.$viewValue){
scrollToBottom();
}
});
$el.bind('scroll', function(){
scope.$apply(ngModel.$setViewValue.bind(ngModel, shouldActivateAutoScroll()));
});
}
};
});
}(angular));
......@@ -41,7 +41,8 @@ var app = angular.module('DashPlayer', [
'DashContributorsService',
'DashPlayerLibrariesService',
'DashShowcaseLibrariesService',
'angularTreeview'
'angularTreeview',
'luegg.directives'
]);
app.directive('chart', function() {
......
......@@ -43,6 +43,9 @@
<!-- https://github.com/eu81273/angular.treeview -->
<script src="app/lib/angular.treeview/angular.treeview.min.js"></script>
<!-- https://rawgithub.com/Luegg/angularjs-scroll-glue/master/src/scrollglue.js -->
<script src="app/lib/scrollglue.js"></script>
<!-- Player -->
<script src="app/js/streaming/MediaPlayer.js"></script>
<script src="app/js/streaming/Context.js"></script>
......@@ -304,7 +307,7 @@
</div>
</div>
<div ng-switch on="showEME">
<div id="emeDebug" class="panel-body panel-stats" ng-switch-when="true">
<div scroll-glue id="emeDebug" class="panel-body panel-stats" ng-switch-when="true">
<span class="panel-title player-text">[J] = Javascript Player</span>
<span class="panel-title video-text">[V] = Video Element</span>
<span class="panel-title cdm-text">[C] = Content Decryption Module (CDM)</span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment