rainbownapkin/canopy
1
0
Fork 0
Code Issues 2 Pull requests Actions Packages Projects Releases Wiki Activity

Added basic panel logic.

Browse source
This commit is contained in:
rainbownapkin 2024-11-16 05:25:06 -05:00
parent 4168635c51
commit 3eccc6d24c
9 changed files with 184 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/controllers/panel/placeholder.js Normal file
View file

@ -0,0 +1,20 @@
/*Canopy - The next generation of stoner streaming software
Copyright (C) 2024 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 <https://www.gnu.org/licenses/>.*/
//root index functions
module.exports.get = async function(req, res){
res.render('panels/placeholder', {});
}

30
src/routers/panelRouter.js Normal file
View file

@ -0,0 +1,30 @@
/*Canopy - The next generation of stoner streaming software
Copyright (C) 2024 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 <https://www.gnu.org/licenses/>.*/
//npm imports
const { Router } = require('express');
//local imports
const placeholderController = require("../controllers/panel/placeholder");
//globals
const router = Router();
//routing functions
router.get('/placeholder', placeholderController.get);
module.exports = router;

3
src/server.js
View file

@ -32,6 +32,7 @@ const profileRouter = require('./routers/profileRouter');
const adminPanelRouter = require('./routers/adminPanelRouter');
const channelRouter = require('./routers/channelRouter');
const newChannelRouter = require('./routers/newChannelRouter');
const panelRouter = require('./routers/panelRouter');
const apiRouter = require('./routers/apiRouter');
//Define Config
@ -88,6 +89,8 @@ app.use('/profile', profileRouter);
app.use('/adminPanel', adminPanelRouter);
app.use('/c', channelRouter);
app.use('/newChannel', newChannelRouter);
//Panel
app.use('/panel', panelRouter);
//Bot-Ready
app.use('/api', apiRouter);

11
src/views/channel.ejs
View file

@ -13,6 +13,7 @@ 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/>.-->
<!DOCTYPE html>
<html>
<head>
@ -66,7 +67,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<i class="chat-panel panel-head-element bi-caret-down-fill" id="chat-panel-users-toggle"></i>
</div>
<div class="chat-panel" id="chat-panel-main-div">
<div class="chat-panel" id="chat-panel-multipanel-div">
<div class="cpanel" id="cpanel-active-div">
<div class="cpanel" id="cpanel-active-header-div">
<p class="cpanel" id="cpanel-active-title">NULL PANEL</p>
<span class="cpanel" id="cpanel-active-title-spacer"></span>
<i class="cpanel bi-x" id="cpanel-active-close-icon"></i>
</div>
<div class="cpanel" id="cpanel-active-doc">
</div>
</div>
<div class="chat-panel" id="chat-area">
<div class="chat-panel" id="chat-panel-buffer-div">
@ -96,6 +104,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<script src="/js/channel/chat.js"></script>
<script src="/js/channel/userlist.js"></script>
<script src="/js/channel/player.js"></script>
<script src="/js/channel/cpanel.js"></script>
<script src="/js/channel/channel.js"></script>
</footer>
</html>

16
src/views/panels/placeholder.ejs Normal file
View file

@ -0,0 +1,16 @@
<!--Canopy - The next generation of stoner streaming software
Copyright (C) 2024 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 <https://www.gnu.org/licenses/>.-->
<h1>This is a test panel!</h1>

35
www/css/channel.css
View file

@ -77,6 +77,7 @@ div#chat-panel-div{
div#chat-panel-main-div{
display: flex;
position: relative;
flex: 1;
height: 1%;
}
@ -88,6 +89,7 @@ div#chat-panel-main-div{
bottom: 0;
left: 0;
width: 0.4em;
z-index: 8;
}
#chat-panel-multipanel-div{
@ -210,4 +212,37 @@ input#chat-panel-prompt{
#chat-panel-show-video-icon{
display: none;
}
#cpanel-active-div{
display: none;
position: absolute;
flex-direction: column;
overflow: hidden;
z-index: 3;
top: 0;
bottom: 0;
left: 0;
width: 30%;
}
#cpanel-active-header-div{
display: flex;
margin: 0 auto;
width: 96%;
height: 1.2em;
}
#cpanel-active-title{
margin: 0;
white-space: nowrap;
overflow: hidden;
}
#cpanel-active-title-spacer{
flex: 1;
}
#cpanel-active-close-icon{
cursor: pointer;
}

9
www/css/theme/movie-night.css
View file

@ -242,4 +242,13 @@ div#chat-panel-control-div{
select.panel-head-element{
height: 1.2em;
margin: auto;
}
#cpanel-active-div{
background-color: var(--bg0);
}
#cpanel-active-header-div{
border-bottom: solid 1px var(--accent0);
}

2
www/js/channel/channel.js
View file

@ -30,6 +30,8 @@ class channel{
this.chatBox = new chatBox(this);
//Create the User List Object
this.userList = new userList(this);
//Create the Canopy Panel Object
this.cPanel = new cPanel(this);
}
connect(){

59
www/js/channel/cpanel.js Normal file
View file

@ -0,0 +1,59 @@
/*Canopy - The next generation of stoner streaming software
Copyright (C) 2024 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 <https://www.gnu.org/licenses/>.*/
class cPanel{
constructor(client){
//Client Object
this.client = client;
//Element Nodes
this.activePanel = document.querySelector("#cpanel-active-div");
this.activePanelTitle = document.querySelector("#cpanel-active-title");
this.activePanelDoc = document.querySelector("#cpanel-active-doc");
this.activePanelCloseIcon = document.querySelector("#cpanel-active-close-icon");
this.setupInput();
}
setupInput(){
this.activePanelCloseIcon.addEventListener("click", this.hidePanel.bind(this));
}
async setPanel(panel){
this.activePanel.style.display = "flex";
this.activePanelTitle.textContent = panel.name;
this.activePanelDoc.innerHTML = await panel.getPage();
}
hidePanel(){
this.activePanel.style.display = "none";
}
}
class panelObj{
constructor(name = "Placeholder Panel", pageURL = "/panel/placeholder"){
this.name = name;
this.pageURL = pageURL;
}
async getPage(){
var response = await fetch(this.pageURL,{
method: "GET",
});
return await response.text();
}
}