From c3483627d8235022d6c13b5225b04c201a22d8ef Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Mon, 9 Nov 2026 04:05:55 -0500 Subject: [PATCH] Started work on improved channel guide rendering --- src/controllers/indexController.js | 3 +- src/views/index.ejs | 15 +----- src/views/partial/channelGuide.ejs | 29 +++++++++++ www/css/{index.css => channelGuide.css} | 64 ++++++++++--------------- www/js/channelGuide.js | 56 ++++++++++++++++++++++ www/js/utils.js | 12 +++++ 6 files changed, 125 insertions(+), 54 deletions(-) create mode 100644 src/views/partial/channelGuide.ejs rename www/css/{index.css => channelGuide.css} (51%) create mode 100644 www/js/channelGuide.js diff --git a/src/controllers/indexController.js b/src/controllers/indexController.js index 537656f..7c96e82 100644 --- a/src/controllers/indexController.js +++ b/src/controllers/indexController.js @@ -25,8 +25,7 @@ const {exceptionHandler, errorHandler} = require('../utils/loggerUtils'); //root index functions module.exports.get = async function(req, res){ try{ - const chanGuide = await channelModel.getChannelList(); - return navRender.render(req, res, 'index', {chanGuide: chanGuide, unescape: validator.unescape}) + return navRender.render(req, res, 'index', {unescape: validator.unescape}) }catch(err){ return exceptionHandler(res, err); } diff --git a/src/views/index.ejs b/src/views/index.ejs index b2932b1..637b545 100644 --- a/src/views/index.ejs +++ b/src/views/index.ejs @@ -18,25 +18,14 @@ along with this program. If not, see . %> <%- include('partial/styles', {instance, user}); %> <%- include('partial/csrfToken', {csrfToken}); %> - <%= instance %> <%- include('partial/navbar', {user}); %> -

Start a new channel...

-
- <% chanGuide.forEach((channel) => { %> -
- -

<%= unescape(channel.name) %>

- -

<%= unescape(channel.description) %> - -

- <% }); %> -
+ <%- include('partial/channelGuide'); %>
<%- include('partial/scripts', {user}); %> +
diff --git a/src/views/partial/channelGuide.ejs b/src/views/partial/channelGuide.ejs new file mode 100644 index 0000000..834c105 --- /dev/null +++ b/src/views/partial/channelGuide.ejs @@ -0,0 +1,29 @@ +<%# Canopy - The next generation of stoner streaming software +Copyright (C) 2024-2026 Rainbownapkin and the TTN Community + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +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 . %> + +
+
+ +
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/www/css/index.css b/www/css/channelGuide.css similarity index 51% rename from www/css/index.css rename to www/css/channelGuide.css index 6512046..85140ee 100644 --- a/www/css/index.css +++ b/www/css/channelGuide.css @@ -14,53 +14,39 @@ 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 .*/ -@media (orientation: landscape){ - #channel-guide-div{ - max-width: 100vh; - } -} - -@media (orientation: portrait){ - #channel-guide-div{ - max-width: 80vw; - } -} - #channel-guide-div{ - display: grid; - grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); - margin: 0 auto 0 auto; -} - -div.channel-guide-entry{ - overflow: hidden; - width: 10em; - margin: 0.5em; -} - -.channel-guide-entry{ - margin: 0.5em auto 0.5em auto; - padding: 0.2em; display: flex; - flex-direction: column; } -.channel-guide-entry-item{ - margin: 0.1em auto 0.1em auto; +#channel-guide-schedule-container { + flex: 1; } -.channel-guide-entry-item img{ - max-width: 7em; - max-height: 7em; + +#channel-guide-schedule-index { + display: flex; + justify-content: space-between; + border-bottom: 1px solid var(--accent0); } -span.channel-guide-entry-item{ - overflow-y: scroll; - height: 2em; - scrollbar-width: none; +.channel-guide-timeslot-label { + width: 100%; + text-align: center; + padding: 0; + margin: 0.3em 0; } -p.channel-guide-entry{ - font-size: 0.8em; - margin-left: 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; + margin: 0; + border-right: 1px solid var(--accent0); +} + +#channel-guide-new-channel-button{ + border-bottom: 1px solid var(--accent0); } \ No newline at end of file diff --git a/www/js/channelGuide.js b/www/js/channelGuide.js new file mode 100644 index 0000000..50447f1 --- /dev/null +++ b/www/js/channelGuide.js @@ -0,0 +1,56 @@ +/*Canopy - The next generation of stoner streaming software +Copyright (C) 2024-2026 Rainbownapkin and the TTN Community + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +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 .*/ + +class ChannelGuide{ + constructor(){ + this.scheduleIndex = document.querySelector('#channel-guide-schedule-index'); + this.channelList = document.querySelector('#channel-guide-channel-list'); + this.scheduledMediaDiv = document.querySelector('#channel-guide-scheduled-media'); + + //Refresh the schedule + this.refreshList(); + } + + async refreshList(){ + //Fetch latest channel list and render it to the schedule page + this.renderList(await utils.ajax.getChannels()); + } + + renderList(schedule, now = new Date()){ + this.renderIndex(now); + } + + renderIndex(now = new Date()){ + //DO EM 3 TEIMS! + for(let slot = 0; slot < 3; slot++){ + //Clone passed date object to prevent over-writing + const setDate = new Date(now.getTime()); + + //Up timeslot by 30 minutes for each timeslot in the loop + setDate.setMinutes(setDate.getMinutes() + (slot * 30)); + + //Generate timeslot label + const timeslotLabel = document.createElement('h3'); + timeslotLabel.classList.add('channel-guide-timeslot-label'); + timeslotLabel.textContent = utils.ux.timeStringFromDate(setDate, false); + + //Append timeslot label to schedule index + this.scheduleIndex.appendChild(timeslotLabel); + } + } +} + +const channelGuide = new ChannelGuide(); \ No newline at end of file diff --git a/www/js/utils.js b/www/js/utils.js index 4661e3a..1d042a8 100644 --- a/www/js/utils.js +++ b/www/js/utils.js @@ -1012,6 +1012,18 @@ class canopyAjaxUtils{ } //Channel + async getChannels(){ + var response = await fetch(`/api/channel/list`,{ + method: "GET" + }); + + if(response.ok){ + return await response.json(); + }else{ + utils.ux.displayResponseError(await response.json()); + } + } + async newChannel(name, description, thumbnail, verification){ var response = await fetch(`/api/channel/register`,{ method: "POST",