From 8a9043067b1c65c1d632ef9d8db95f0afbbdbe74 Mon Sep 17 00:00:00 2001
From: vexorian <vexorian@gmail.com>
Date: Sat, 21 Nov 2020 00:11:41 -0400
Subject: [PATCH] Add arrows to control channel programming height. 
 work-around for #182

---
 web/directives/channel-config.js         | 40 ++++++++++++++++++++++++
 web/public/style.css                     |  1 -
 web/public/templates/channel-config.html | 28 +++++++++++++++--
 3 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/web/directives/channel-config.js b/web/directives/channel-config.js
index b11e2e4..4bddfeb 100644
--- a/web/directives/channel-config.js
+++ b/web/directives/channel-config.js
@@ -17,6 +17,24 @@ module.exports = function ($timeout, $location, dizquetv, resolutionOptions) {
 
             scope.maxSize = 50000;
 
+            scope.programming = {
+                maxHeight:  30,
+                step : 1,
+            }
+
+
+            try {
+                let h = parseFloat( localStorage.getItem("channel-programming-list-height" ) );
+                if (isNaN(h)) {
+                    h = 30;
+                }
+                h = Math.min(64, Math.max(1, h));
+                console.log("loaded=" + h);
+                scope.programming.maxHeight =  h;
+            } catch (e) {
+                console.error(e);
+            }
+
             scope.blockCount = 1;
             scope.showShuffleOptions = (localStorage.getItem("channel-tools") === "on");
             scope.reverseTools = (localStorage.getItem("channel-tools-position") === "left");
@@ -1540,6 +1558,28 @@ module.exports = function ($timeout, $location, dizquetv, resolutionOptions) {
                 return options;
             }
 
+            scope.programmingHeight = () => {
+                return scope.programming.maxHeight + "rem";
+            }
+            let setProgrammingHeight = (h) => {
+                scope.programming.step++;
+                $timeout( () => {
+                    scope.programming.step--;
+                }, 1000 )
+                scope.programming.maxHeight = h;
+                localStorage.setItem("channel-programming-list-height", "" + h );
+            };
+            scope.programmingZoomIn = () => {
+                let h = scope.programming.maxHeight;
+                h = Math.min( Math.ceil(h + scope.programming.step ), 64);
+                setProgrammingHeight(h);
+            }
+            scope.programmingZoomOut = () => {
+                let h = scope.programming.maxHeight;
+                h = Math.max( Math.floor(h - scope.programming.step ), 2 );
+                setProgrammingHeight(h);
+            }
+
             scope.refreshFillerStuff = () => {
                 if (typeof(scope.channel.fillerCollections) === 'undefined') {
                     return;
diff --git a/web/public/style.css b/web/public/style.css
index f1aa30b..12e6445 100644
--- a/web/public/style.css
+++ b/web/public/style.css
@@ -288,7 +288,6 @@ div.programming-panes div.reverse {
   flex-direction: row-reverse;
 }
 div.programming-panes div.programming-pane {
-  max-height: 30rem;
   overflow-y: auto;
   padding-top: 0;
   padding-bottom: 0;
diff --git a/web/public/templates/channel-config.html b/web/public/templates/channel-config.html
index c346cfc..c605114 100644
--- a/web/public/templates/channel-config.html
+++ b/web/public/templates/channel-config.html
@@ -87,6 +87,25 @@
                                     </label>
                                 </div>
 
+                                <div ng-style="{order: (reverseTools?1:4) }" >
+                                    <button class="btn btn-sm btn-outline-info btn-programming-tools"
+                                    ng-click="programmingZoomIn()"
+                                    title="Higher"
+                                    >
+                                        <span class="fa fa-arrow-circle-down"></span>
+                                    </button>
+                                </div>
+
+                                <div ng-style="{order: (reverseTools?1:4) }" >
+                                    <button class="btn btn-sm btn-outline-info btn-programming-tools"
+                                    ng-click="programmingZoomOut()"
+                                    title="Shorter"
+                                    >
+                                        <span class="fa fa-arrow-circle-up"></span>
+                                    </button>
+                                </div>
+
+
                                 <div ng-show='showShuffleOptions' ng-style="{order: (reverseTools?1:4) }" >
                                     <button class="btn btn-sm btn-outline-info btn-programming-tools"
                                     ng-click="toggleToolsDirection()"
@@ -117,13 +136,16 @@
                     </div>
                 </div>
                 
-                <div class="modal-body programming-panes" ng-show="tab == 'programming'">
+                <div class="modal-body programming-panes" ng-show="tab == 'programming'"
+                     ng-style="{'max-height':programmingHeight()}"
+                >
                     <div class='row' ng-class="{'reverse': reverseTools }" >
                         <div vs-repeat="options" ng-class="{'programming-pane': true, 'col':true, 'd-block': showShuffleOptions, 'd-sm-none': showShuffleOptions, 'd-md-block' : showShuffleOptions, container: true, 'list-group': true, 'list-group-root': true, 'programming-programs': true}" ng-show="hasPrograms()"
                             dnd-drop="dropFunction(index , item)"
                             dnd-list=""
                             ng-init="setUpWatcher()"
                             ng-if="true"
+                            ng-style="{'max-height':programmingHeight()}"
                         >
                             <div ng-repeat="x in channel.programs track by x.$index"
                                 ng-click="selectProgram(x.$index)"
@@ -151,7 +173,9 @@
                             <small class='text-info'>There are no programs in the channel, use the <i class='fas fa-plus'></i> button to add programs from your media library or use the Tools to add Flex time or a Channel Redirect</small>
                         </div>
 
-                        <div class='col-md-4 col-sm-12 col-xl-6  col-lg-5 programming-pane tools-pane' ng-show="showShuffleOptions">
+                        <div class='col-md-4 col-sm-12 col-xl-6  col-lg-5 programming-pane tools-pane' ng-show="showShuffleOptions"
+                            ng-style="{'max-height':programmingHeight()}"
+                        >
 
                             <div class="row">
                                 <div class="col-xl-6 col-md-12" style="padding: 5px;"  ng-show="hasPrograms()">