diff --git a/www/css/channelGuide.css b/www/css/channelGuide.css
index 85140ee..531e4b5 100644
--- a/www/css/channelGuide.css
+++ b/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 .*/
+.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 .*/
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{
- border-bottom: 1px solid var(--accent0);
+.channel-guide-schedule-row{
+ 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;
}
\ No newline at end of file
diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css
index 2f7b2df..4ad6774 100644
--- a/www/css/theme/movie-night.css
+++ b/www/css/theme/movie-night.css
@@ -324,27 +324,17 @@ input.control-prompt, input.control-prompt:focus{
background-color: var(--bg1-alt0);
}
-/* index */
-.channel-guide-entry{
- background-color: var(--bg1);
- color: var(--accent1);
+/* chan guide */
+.channel-guide-channel-list-entry {
+ background-color: var(--bg2);
}
-div.channel-guide-entry{
- border-radius: 0.3em;
- box-shadow: 0.2em 0.2em 0.1em var(--bg1-alt0) inset;
-}
-
-span.channel-guide-entry-item{
- 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-guide-channel-list-entry::before {
+ content: '';
+ background: var(--media-header-gradient);
+ position: absolute;
+ width: 100%;
+ height: 100%;
}
/* channel settings */
diff --git a/www/css/theme/the-network-classic.css b/www/css/theme/the-network-classic.css
index 6a16288..5d760f6 100644
--- a/www/css/theme/the-network-classic.css
+++ b/www/css/theme/the-network-classic.css
@@ -364,27 +364,33 @@ input.control-prompt, input.control-prompt:focus{
display: none;
}
-/* index */
-.channel-guide-entry{
- background-color: var(--bg1);
- color: var(--accent1);
+/* chan guide */
+.channel-guide-channel-list-entry {
+ background-color: var(--bg2-alt1);
}
-div.channel-guide-entry{
- border-radius: 0.3em;
- box-shadow: 0.2em 0.2em 0.1em var(--bg1-alt0) inset;
+.channel-guide-channel-list-entry::before {
+ content: '';
+ background: var(--media-header-gradient);
+ position: absolute;
+ width: 100%;
+ height: 100%;
}
-span.channel-guide-entry-item{
- 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;
+#channel-guide-schedule-index {
+ border-bottom: 1px solid var(--accent0);
+}
+/*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{
+ border-right: 1px solid var(--accent0);
+}
-p.channel-guide-entry-item{
- background-color: var(--bg1-alt0);
+#channel-guide-new-channel-button{
+ border-bottom: 1px solid var(--accent0);
}
/* channel settings */
diff --git a/www/js/channelGuide.js b/www/js/channelGuide.js
index 30cbaf2..b2fe286 100644
--- a/www/js/channelGuide.js
+++ b/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
- setTimeout(this.refreshList.bind(this), 1000 * 60);
+ //Set timer to refresh the thing erry minute on the minute
+ 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();
\ No newline at end of file