Virtual Scroll for channel editor. Big thanks to @TimeBomb for the help.
This commit is contained in:
parent
07b96e258d
commit
1395c681ca
@ -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",
|
||||
|
||||
@ -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'))
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -340,22 +340,10 @@
|
||||
|
||||
</div>
|
||||
<div class="list-group list-group-root">
|
||||
<div ng-show="channel.programs.length > 100">
|
||||
<div>Showing programs {{minProgramIndex+1}} to {{minProgramIndex+100}}</div>
|
||||
</div>
|
||||
<input ng-show="channel.programs.length > 100" type="range" ng-model="minProgramIndex" min="0" max="{{ channel.programs.length - 100 }}" />
|
||||
<div ng-if="minProgramIndex > 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">
|
||||
⋮
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="minProgramIndex <= $index && $index < 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 < 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">
|
||||
⋮
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item flex-container" ng-if="channel.programs.length > 0" >
|
||||
<div class="program-start">
|
||||
{{ dateForGuide(channel.programs[channel.programs.length-1].stop)}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user