Merge pull request #99 from vexorian/20200907_vs

Virtual Scroll for channel editor. Big thanks to @TimeBomb for the help.
This commit is contained in:
vexorian 2020-09-07 21:55:41 -04:00 committed by GitHub
commit 9b636ae2d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 30 deletions

View File

@ -18,6 +18,7 @@
"dependencies": {
"angular": "^1.7.9",
"angular-router-browserify": "0.0.2",
"angular-vs-repeat": "2.0.13",
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"diskdb": "^0.1.17",

View File

@ -3,8 +3,9 @@ require('angular-router-browserify')(angular)
require('./ext/lazyload')(angular)
require('./ext/dragdrop')
require('./ext/angularjs-scroll-glue')
require('angular-vs-repeat');
var app = angular.module('myApp', ['ngRoute', 'angularLazyImg', 'dndLists', 'luegg.directives'])
var app = angular.module('myApp', ['ngRoute', 'vs-repeat', 'angularLazyImg', 'dndLists', 'luegg.directives'])
app.service('plex', require('./services/plex'))
app.service('dizquetv', require('./services/dizquetv'))

View File

@ -113,6 +113,7 @@ module.exports = function ($timeout, $location, dizquetv) {
setTimeout( () => {
scope.channel.programs.splice(dropIndex + index, 0, program);
updateChannelDuration()
scope.$apply();
}, 1);
return true;
}
@ -375,15 +376,16 @@ module.exports = function ($timeout, $location, dizquetv) {
}
let ems = Math.pow( Math.min(24*60*60*1000, program.duration), 0.7 );
ems = ems / Math.pow(5*60*1000., 0.7);
ems = Math.max( 0.25 , ems);
let top = Math.max(0.0, (1.75 - ems) / 2.0) ;
ems = 1.3;
let top = 0.01;
if (top == 0.0) {
top = "1px";
} else {
top = top + "em";
}
return {
'width': '0.5em',
'height': ems + 'em',
@ -869,6 +871,7 @@ module.exports = function ($timeout, $location, dizquetv) {
scope.hasFlex = false;
for (let i = 0, l = scope.channel.programs.length; i < l; i++) {
scope.channel.programs[i].start = new Date(scope.channel.startTime.valueOf() + scope.channel.duration)
scope.channel.programs[i].$index = i;
scope.channel.duration += scope.channel.programs[i].duration
scope.channel.programs[i].stop = new Date(scope.channel.startTime.valueOf() + scope.channel.duration)
if (scope.channel.programs[i].isOffline) {
@ -906,6 +909,9 @@ module.exports = function ($timeout, $location, dizquetv) {
scope.error.programs = "No programs have been selected. Select at least one program."
else {
channel.startTime.setMilliseconds( scope.millisecondsOffset);
for (let i = 0; i < scope.channel.programs.length; i++) {
delete scope.channel.programs[i].$index;
}
scope.onDone(JSON.parse(angular.toJson(channel)))
}
$timeout(() => { scope.error = {} }, 3500)

View File

@ -340,22 +340,10 @@
</div>
<div class="list-group list-group-root">
<div ng-show="channel.programs.length &gt; 100">
<div>Showing programs {{minProgramIndex+1}} to {{minProgramIndex+100}}</div>
</div>
<input ng-show="channel.programs.length &gt; 100" type="range" ng-model="minProgramIndex" min="0" max="{{ channel.programs.length - 100 }}" />
<div ng-if="minProgramIndex &gt; 0" class="list-group-item flex-container" >
<div class="program-start">
{{ dateForGuide(channel.startTime) }}
</div>
<div style="margin-right: 5px; font-weight:ligther; text-align:center">
&#8942;
</div>
</div>
<div ng-if="minProgramIndex &lt;= $index &amp;&amp; $index &lt; minProgramIndex+100" ng-repeat="x in channel.programs track by $index" ng-click="selectProgram($index)" dnd-list="" dnd-drop="dropFunction(index , $index, item)"
>
<div class="list-group-item flex-container program-row" dnd-draggable="x" dnd-moved="channel.programs.splice($index, 1);" dnd-effect-allowed="move"
<div vs-repeat="options" style='max-height: 30em; overflow-y: auto;'>
<div ng-repeat="x in channel.programs track by x.$index" ng-click="selectProgram(x.$index)" dnd-list="" dnd-drop="dropFunction(index , x.$index, item)" style="height: 1.5em; overflow:hidden">
<div class="list-group-item flex-container program-row" dnd-draggable="x" dnd-moved="channel.programs.splice(x.$index, 1);" dnd-effect-allowed="move"
>
<div class="program-start">
@ -371,20 +359,12 @@
<span ng-if="x.type === 'redirect' " ><i>Redirect to channel:</i> <b>{{x.channel}}</b></span>
</div>
<div class="flex-pull-right"></div>
<button class="btn btn-sm btn-link" ng-click="removeItem($index); $event.stopPropagation()">
<button class="btn btn-sm btn-link" ng-click="removeItem(x.$index); $event.stopPropagation()">
<i class="text-danger fa fa-trash"></i>
</button>
</div>
</div>
<div ng-if="minProgramIndex &lt; channel.programs.length - 100" class="list-group-item flex-container" >
<div class="program-start">
{{ dateForGuide(channel.programs[minProgramIndex + 100 - 1].stop)}}
</div>
<div style="margin-right: 5px; font-weight:ligther; text-align:center">
&#8942;
</div>
</div>
</div>
<div class="list-group-item flex-container" ng-if="channel.programs.length &gt; 0" >
<div class="program-start">
{{ dateForGuide(channel.programs[channel.programs.length-1].stop)}}