Continued work on improved channel guide

src/views/partial/channelGuide.ejs

@@ -15,10 +15,12 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
 <link rel="stylesheet" type="text/css" href="css/channelGuide.css">
 <div id="channel-guide-div" class="channel-guide">
-    <div id="channel-guide-channel-list">
+    <div id="channel-guide-channel-list-container">
-        <div id="channel-guide-new-channel-button" class="positive-button">
+        <div id="channel-guide-new-channel-button" class="positive-button channel-guide-channel-list-column">
             <h3><a href="/newchannel">Create Channel</a></h3>
         </div>
+        <div id="channel-guide-channel-list">
+        </div>
     </div>
     <div id="channel-guide-schedule-container">
         <div id="channel-guide-schedule-index">

www/css/channelGuide.css

@@ -14,19 +14,24 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 
+.channel-guide-channel-list-column{
+  width: 11em;
+  text-align: center;
+}
+
 #channel-guide-div{
     display: flex;
 }
 
 #channel-guide-schedule-container {
   flex: 1;
+  width: calc(100% - 11em);
 }
 
 
 #channel-guide-schedule-index {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid var(--accent0);
 }
 
 .channel-guide-timeslot-label {
@@ -36,17 +41,41 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
   margin: 0.3em 0;
 }
 
-/*EWWIE WHY DOES CSS COUNTING START AT ONE?!?!*/
-.channel-guide-timeslot-label:not(:nth-child(1)){
-  border-left: 1px solid var(--accent0);
-}
-
 #channel-guide-new-channel-button h3{
-  padding: 0.3em 0.5em;
+  padding: 0.3em 0;
   margin: 0;
-  border-right: 1px solid var(--accent0);
 }
 
-#channel-guide-new-channel-button{
+.channel-guide-schedule-row{
-  border-bottom: 1px solid var(--accent0);
+  height: 2.2em;
+}
+
+.channel-guide-channel-list-entry {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position-y: center;
+}
+
+.channel-guide-channel-list-entry h3 {
+  margin: 0;
+  z-index: 1;
+}
+
+.channel-guide-schedule-track {
+  display: flex;
+}
+
+.channel-guide-schedule-entry {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.channel-guide-schedule-entry h3 {
+  margin: 0;
+  text-wrap: nowrap;
 }

www/css/theme/movie-night.css

@@ -324,27 +324,17 @@ input.control-prompt, input.control-prompt:focus{
     background-color: var(--bg1-alt0);
 }
 
-/* index */
+/* chan guide */
-.channel-guide-entry{
+.channel-guide-channel-list-entry {
-    background-color: var(--bg1);
+    background-color: var(--bg2);
-    color: var(--accent1);
 }
 
-div.channel-guide-entry{
+.channel-guide-channel-list-entry::before {
-    border-radius: 0.3em;
+  content: '';
-    box-shadow: 0.2em 0.2em 0.1em var(--bg1-alt0) inset;
+  background: var(--media-header-gradient);
-}
+  position: absolute;
-
+  width: 100%;
-span.channel-guide-entry-item{
+  height: 100%;
-    background-color: var(--bg1-alt0);
-    box-shadow: 0.2em 0.2em 0.1em black inset;
-    border-radius: 0.3em;
-    margin: 0 0.1em 0 0.1em;
-}
-
-
-p.channel-guide-entry-item{
-    background-color: var(--bg1-alt0);
 }
 
 /* channel settings */

www/css/theme/the-network-classic.css

@@ -364,27 +364,33 @@ input.control-prompt, input.control-prompt:focus{
     display: none;
 }
 
-/* index */
+/* chan guide */
-.channel-guide-entry{
+.channel-guide-channel-list-entry {
-    background-color: var(--bg1);
+    background-color: var(--bg2-alt1);
-    color: var(--accent1);
 }
 
-div.channel-guide-entry{
+.channel-guide-channel-list-entry::before {
-    border-radius: 0.3em;
+  content: '';
-    box-shadow: 0.2em 0.2em 0.1em var(--bg1-alt0) inset;
+  background: var(--media-header-gradient);
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 
-span.channel-guide-entry-item{
+#channel-guide-schedule-index {
-    background-color: var(--bg1-alt0);
+  border-bottom: 1px solid var(--accent0);
-    box-shadow: 0.2em 0.2em 0.1em black inset;
+}
-    border-radius: 0.3em;
+/*EWWIE WHY DOES CSS COUNTING START AT ONE?!?!*/
-    margin: 0 0.1em 0 0.1em;
+.channel-guide-timeslot-label:not(:nth-child(1)){
+  border-left: 1px solid var(--accent0);
 }
 
+#channel-guide-new-channel-button h3{
+  border-right: 1px solid var(--accent0);
+}
 
-p.channel-guide-entry-item{
+#channel-guide-new-channel-button{
-    background-color: var(--bg1-alt0);
+  border-bottom: 1px solid var(--accent0);
 }
 
 /* channel settings */

www/js/channelGuide.js

@@ -34,7 +34,9 @@ class ChannelGuide{
     }
 
     renderList(schedule, now = new Date()){
-        this.renderIndex(now)
+        this.renderIndex(now);
+        this.renderChannelList(schedule, now);
+        this.renderSchedule(schedule, now);
 
         //if we've got a job to refresh the list
         if(this.refreshTimer != null){
@@ -42,8 +44,8 @@ class ChannelGuide{
             clearTimeout(this.refreshTimer);
         }
 
-        //Set timer to refresh the thing erry minute 
+        //Set timer to refresh the thing erry minute on the minute
-        setTimeout(this.refreshList.bind(this), 1000 * 60);
+        setTimeout(this.refreshList.bind(this), 1000 * (60 - now.getSeconds()));
     }
 
     renderIndex(now = new Date()){
@@ -67,6 +69,64 @@ class ChannelGuide{
             this.scheduleIndex.appendChild(timeslotLabel);
         }
     }
+
+    renderChannelList(schedule, now = new Date()){
+        //Clean out channel list
+        this.channelList.innerHTML = '';
+
+        for(const channel of schedule){
+            //Create entry for channel
+            const entry = document.createElement('div');
+            entry.classList.add('channel-guide-channel-list-entry', 'channel-guide-schedule-row');
+            entry.style.backgroundImage = `Url("${channel.thumbnail}")`;
+
+            //Throw together a channel label
+            const entryLabel = document.createElement('h3');
+            entryLabel.textContent = utils.unescapeEntities(channel.name);
+
+            //Some assembly required
+            entry.appendChild(entryLabel);
+
+            //Add channel entry to the list
+            this.channelList.appendChild(entry);
+        }
+    }
+
+    renderSchedule(schedule, now = new Date()){
+        //Clear out the schedule
+        this.scheduledMediaDiv.innerHTML = '';
+
+        //Iterate through all of the received channels
+        for(const channel of schedule){
+            //Create a div to hold all of the current channels entries
+            const channelTrack = document.createElement('div');
+            channelTrack.classList.add('channel-guide-schedule-track');
+
+            //For every scheduled video 
+            for(const entry of channel.schedule){
+                //Create div for current schedule entry
+                const entryDiv = document.createElement('div');
+                entryDiv.classList.add('channel-guide-schedule-entry', 'channel-guide-schedule-row');
+
+                //Throw down an entry label
+                const entryLabel = document.createElement('h3');
+                entryLabel.textContent = utils.unescapeEntities(entry.title);
+
+                //Assemble the entry
+                entryDiv.appendChild(entryLabel);
+
+                //slot entry into schedule track
+                channelTrack.appendChild(entryDiv);
+            }
+
+            //Inject channel track into schedule div
+            this.scheduledMediaDiv.appendChild(channelTrack);
+        }
+    }
+
+    renderScheduleItem(item){
+    }
+
 }
 
 const channelGuide = new ChannelGuide();