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

Started work on chat autocomplete

Browse source
This commit is contained in:
rainbow napkin 2025-01-03 04:05:29 -05:00
parent 6cb7a6223e
commit 8f45048ab6
8 changed files with 193 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
src/views/channel.ejs
View file

@ -26,97 +26,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
<body>
<%- include('partial/navbar', {user}); %>
<div class="channel" id="channel-flexbox">
<div class="media-panel" id="media-panel-div">
<div class="media-panel panel-head-div" id="media-panel-head-div">
<i class="media-panel panel-head-element bi-caret-down-fill" id="media-panel-div-toggle-icon"></i>
<p class="media-panel panel-head-element" id="media-panel-title-paragraph">Currently Playing: NULL</p>
<span class="media-panel panel-head-spacer-span" id="media-panel-head-spacer-span"></span>
<i class="media-panel panel-head-element bi-arrow-repeat" id="media-panel-sync-icon"></i>
<i class="media-panel panel-head-element bi-aspect-ratio-fill" id="media-panel-aspect-lock-icon"></i>
<i class="media-panel panel-head-element bi-film" id="media-panel-cinema-mode-icon"></i>
<i class="media-panel panel-head-element bi-arrows-vertical" id="media-panel-flip-vertical-icon"></i>
<i class="media-panel panel-head-element bi-arrows" id="media-panel-flip-horizontal-icon"></i>
<i class="media-panel panel-head-element bi-arrow-clockwise" id="media-panel-reload-icon"></i>
<i class="media-panel panel-head-element bi-chat-right-dots-fill" id="media-panel-show-chat-icon"></i>
</div>
<video src="/video/static.webm" class="media-panel" id="media-panel-video" muted loop autoplay></video>
</div>
<div class="chat-panel" id="chat-panel-div">
<div class="drag-handle left-drag-handle" id="chat-panel-drag-handle">
</div>
<div class="chat-panel panel-head-div" id="chat-panel-head-div">
<i class="chat-panel panel-head-element bi-film" id="chat-panel-show-video-icon"></i>
<i class="chat-panel panel-head-element bi-caret-down-fill" id="chat-panel-div-hide"></i>
<select class="chat-panel panel-head-element" id="chat-panel-high-level-select">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<p class="chat-panel panel-head-element" id="chat-panel-high-level-paragraph">/10</p>
<select class="chat-panel panel-head-element" id="chat-panel-flair-select">
<option>Flair</option>
</select>
<span class="chat-panel panel-head-spacer-span" id="chat-panel-head-spacer-span"></span>
<p class="chat-panel panel-head-element interactive" id="chat-panel-user-count">NULL Users</p>
<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="active-cpanel cpanel-div" id="cpanel-active-div">
<div class="active-cpanel cpanel-header-div" id="cpanel-active-header-div">
<i class="active-cpanel cpanel-header-icon cpanel-pin-icon bi-pin-angle-fill" id="cpanel-active-pin-icon"></i>
<p class="active-cpanel cpanel-title" id="cpanel-active-title">NULL PANEL</p>
<span class="active-cpanel cpanel-title-spacer" id="cpanel-active-title-spacer"></span>
<i class="active-cpanel cpanel-header-icon cpanel-popout-icon bi-window-stack" id="cpanel-active-popout-icon"></i>
<i class="active-cpanel cpanel-header-icon cpanel-close-icon bi-x" id="cpanel-active-close-icon"></i>
<div class="drag-handle right-drag-handle" id="cpanel-active-drag-handle">
</div>
</div>
<div class="active-cpanel cpanel-doc" id="cpanel-active-doc">
</div>
</div>
<div class="chat-panel" id="cpanel-pinned-splitter">
<div class="pinned-cpanel cpanel-div" id="cpanel-pinned-div">
<div class="pinned-cpanel cpanel-header-div" id="cpanel-pinned-header-div">
<i class="pinned-cpanel cpanel-header-icon cpanel-unpin-icon bi-pin-fill" id="cpanel-pinned-unpin-icon"></i>
<p class="pinned-cpanel cpanel-title" id="cpanel-pinned-title">NULL PANEL</p>
<span class="pinned-cpanel cpanel-title-spacer" id="cpanel-pinned-title-spacer"></span>
<i class="pinned-cpanel cpanel-header-icon cpanel-popout-icon bi-window-stack" id="cpanel-pinned-popout-icon"></i>
<i class="pinned-cpanel cpanel-header-icon cpanel-close-icon bi-x" id="cpanel-pinned-close-icon"></i>
</div>
<div class="pinned-cpanel cpanel-doc" id="cpanel-pinned-doc">
</div>
<div class="drag-handle right-drag-handle" id="cpanel-pinned-drag-handle">
</div>
</div>
<div class="chat-panel" id="chat-area">
<div class="chat-panel" id="chat-panel-buffer-div">
</div>
<div class="chat-panel control-prompt" id="chat-panel-control-div">
<i class="chat-panel chat-panel-control control-prompt bi-gear-fill" id="chat-panel-settings-icon"></i>
<i class="chat-panel chat-panel-control control-prompt bi-magic" id="chat-panel-admin-icon"></i>
<i class="chat-panel chat-panel-control control-prompt bi-images" id="chat-panel-emote-icon"></i>
<input class="chat-panel chat-panel-control control-prompt" id="chat-panel-prompt" placeholder="Chat...">
<button class="chat-panel chat-panel-control positive-button" id="chat-panel-send-button">Send</button>
</div>
</div>
</div>
<div class="chat-panel" id="chat-panel-users-div">
<div class="drag-handle left-drag-handle" id="chat-panel-users-drag-handle">
</div>
<div class="chat-panel" id="chat-panel-users-list-div">
</div>
</div>
</div>
</div>
</div>
<%- include('partial/channel/mediaPanel') %>
<%- include('partial/channel/chatPanel') %>
</div>
</body>
<footer>

95
src/views/partial/channel/chatPanel.ejs Normal file
View file

@ -0,0 +1,95 @@
<%# Canopy - The next generation of stoner streaming software
Copyright (C) 2024-2025 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/>. %>
<div class="chat-panel" id="chat-panel-div">
<div class="drag-handle left-drag-handle" id="chat-panel-drag-handle">
</div>
<div class="chat-panel panel-head-div" id="chat-panel-head-div">
<i class="chat-panel panel-head-element bi-film" id="chat-panel-show-video-icon"></i>
<i class="chat-panel panel-head-element bi-caret-down-fill" id="chat-panel-div-hide"></i>
<select class="chat-panel panel-head-element" id="chat-panel-high-level-select">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<p class="chat-panel panel-head-element" id="chat-panel-high-level-paragraph">/10</p>
<select class="chat-panel panel-head-element" id="chat-panel-flair-select">
<option>Flair</option>
</select>
<span class="chat-panel panel-head-spacer-span" id="chat-panel-head-spacer-span"></span>
<p class="chat-panel panel-head-element interactive" id="chat-panel-user-count">NULL Users</p>
<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="active-cpanel cpanel-div" id="cpanel-active-div">
<div class="active-cpanel cpanel-header-div" id="cpanel-active-header-div">
<i class="active-cpanel cpanel-header-icon cpanel-pin-icon bi-pin-angle-fill" id="cpanel-active-pin-icon"></i>
<p class="active-cpanel cpanel-title" id="cpanel-active-title">NULL PANEL</p>
<span class="active-cpanel cpanel-title-spacer" id="cpanel-active-title-spacer"></span>
<i class="active-cpanel cpanel-header-icon cpanel-popout-icon bi-window-stack" id="cpanel-active-popout-icon"></i>
<i class="active-cpanel cpanel-header-icon cpanel-close-icon bi-x" id="cpanel-active-close-icon"></i>
<div class="drag-handle right-drag-handle" id="cpanel-active-drag-handle">
</div>
</div>
<div class="active-cpanel cpanel-doc" id="cpanel-active-doc">
</div>
</div>
<div class="chat-panel" id="cpanel-pinned-splitter">
<div class="pinned-cpanel cpanel-div" id="cpanel-pinned-div">
<div class="pinned-cpanel cpanel-header-div" id="cpanel-pinned-header-div">
<i class="pinned-cpanel cpanel-header-icon cpanel-unpin-icon bi-pin-fill" id="cpanel-pinned-unpin-icon"></i>
<p class="pinned-cpanel cpanel-title" id="cpanel-pinned-title">NULL PANEL</p>
<span class="pinned-cpanel cpanel-title-spacer" id="cpanel-pinned-title-spacer"></span>
<i class="pinned-cpanel cpanel-header-icon cpanel-popout-icon bi-window-stack" id="cpanel-pinned-popout-icon"></i>
<i class="pinned-cpanel cpanel-header-icon cpanel-close-icon bi-x" id="cpanel-pinned-close-icon"></i>
</div>
<div class="pinned-cpanel cpanel-doc" id="cpanel-pinned-doc">
</div>
<div class="drag-handle right-drag-handle" id="cpanel-pinned-drag-handle">
</div>
</div>
<div class="chat-panel" id="chat-area">
<div class="chat-panel" id="chat-panel-buffer-div">
</div>
<div class="chat-panel control-prompt" id="chat-panel-control-div">
<i class="chat-panel chat-panel-control control-prompt bi-gear-fill" id="chat-panel-settings-icon"></i>
<i class="chat-panel chat-panel-control control-prompt bi-magic" id="chat-panel-admin-icon"></i>
<i class="chat-panel chat-panel-control control-prompt bi-images" id="chat-panel-emote-icon"></i>
<span id="chat-panel-prompt-span">
<p id="chat-panel-prompt-autocomplete" class="chat-panel"><span id="chat-panel-prompt-autocomplete-filler"></span><span id="chat-panel-autocomplete-display"></span></p>
<input class="chat-panel chat-panel-control control-prompt" id="chat-panel-prompt" placeholder="Chat...">
</span>
<button class="chat-panel chat-panel-control positive-button" id="chat-panel-send-button">Send</button>
</div>
</div>
</div>
<div class="chat-panel" id="chat-panel-users-div">
<div class="drag-handle left-drag-handle" id="chat-panel-users-drag-handle">
</div>
<div class="chat-panel" id="chat-panel-users-list-div">
</div>
</div>
</div>
</div>
</div>

31
src/views/partial/channel/mediaPanel.ejs Normal file
View file

@ -0,0 +1,31 @@
<%# Canopy - The next generation of stoner streaming software
Copyright (C) 2024-2025 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/>. %>
<div class="media-panel" id="media-panel-div">
<div class="media-panel panel-head-div" id="media-panel-head-div">
<i class="media-panel panel-head-element bi-caret-down-fill" id="media-panel-div-toggle-icon"></i>
<p class="media-panel panel-head-element" id="media-panel-title-paragraph">Currently Playing: NULL</p>
<span class="media-panel panel-head-spacer-span" id="media-panel-head-spacer-span"></span>
<i class="media-panel panel-head-element bi-arrow-repeat" id="media-panel-sync-icon"></i>
<i class="media-panel panel-head-element bi-aspect-ratio-fill" id="media-panel-aspect-lock-icon"></i>
<i class="media-panel panel-head-element bi-film" id="media-panel-cinema-mode-icon"></i>
<i class="media-panel panel-head-element bi-arrows-vertical" id="media-panel-flip-vertical-icon"></i>
<i class="media-panel panel-head-element bi-arrows" id="media-panel-flip-horizontal-icon"></i>
<i class="media-panel panel-head-element bi-arrow-clockwise" id="media-panel-reload-icon"></i>
<i class="media-panel panel-head-element bi-chat-right-dots-fill" id="media-panel-show-chat-icon"></i>
</div>
<video src="/video/static.webm" class="media-panel" id="media-panel-video" muted loop autoplay></video>
</div>

22
www/css/channel.css
View file

@ -264,10 +264,32 @@ span.user-entry{
margin: 0.5em;
}
#chat-panel-prompt-span{
flex: 1;
position: relative;
display: flex;
overflow: hidden;
}
#chat-panel-prompt{
font-size: 10pt;
margin-left: 0.5em;
}
#chat-panel-prompt-autocomplete{
position: absolute;
text-wrap: nowrap;
font-size: 10pt;
z-index: 10;
margin: 0;
left: 1em;
top: 0.6em;
}
#chat-panel-prompt-autocomplete-filler{
visibility: hidden;
}
.toke{
text-align: center;
margin: 0.2em auto;

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

@ -287,6 +287,11 @@ p.channel-guide-entry-item{
background-color: var(--bg2);
}
#chat-panel-prompt-autocomplete{
color: var(--focus0);
text-shadow: var(--focus-glow0-alt0);
}
.chat-entry{
background-color: var(--bg2);
border-bottom: 1px solid var(--bg2-alt1);

16
www/js/channel/chat.js
View file

@ -34,6 +34,8 @@ class chatBox{
this.flairSelect = document.querySelector("#chat-panel-flair-select");
this.chatBuffer = document.querySelector("#chat-panel-buffer-div");
this.chatPrompt = document.querySelector("#chat-panel-prompt");
this.autocompletePlaceholder = document.querySelector("#chat-panel-prompt-autocomplete-filler");
this.autocompleteDisplay = document.querySelector("#chat-panel-prompt-autocomplete-display");
this.settingsIcon = document.querySelector("#chat-panel-settings-icon");
this.adminIcon = document.querySelector("#chat-panel-admin-icon");
this.emoteIcon = document.querySelector("#chat-panel-emote-icon");
@ -52,6 +54,7 @@ class chatBox{
setupInput(){
//Chat bar
this.chatPrompt.addEventListener("keydown", this.send.bind(this));
this.chatPrompt.addEventListener("input", this.checkAutocomplete.bind(this));
this.sendButton.addEventListener("click", this.send.bind(this));
this.settingsIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj(client))});
this.adminIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj(client))});
@ -130,6 +133,11 @@ class chatBox{
this.resizeAspect();
}
catChat(text){
this.chatPrompt.value += text;
this.checkAutocomplete();
}
send(event){
if((!event || !event.key || event.key == "Enter") && this.chatPrompt.value){
this.commandPreprocessor.preprocess(this.chatPrompt.value);
@ -137,6 +145,14 @@ class chatBox{
}
}
checkAutocomplete(event){
//Rebuild this fucker every time because it really doesn't take that much compute power and emotes/used tokes change
//Worst case we could store it persistantly and update as needed but I think that might be much
const dictionary = this.commandPreprocessor.buildAutocompleteDictionary();
this.autocompletePlaceholder.innerHTML = this.chatPrompt.value;
}
handleClientInfo(data){
this.updateFlairSelect(data.flairList, data.user.flair);
this.updateHighSelect(data.user.highLevel);

21
www/js/channel/commandPreprocessor.js
View file

@ -143,6 +143,27 @@ class commandPreprocessor{
return foundEmote;
}
buildAutocompleteDictionary(){
//This isn't complete, just a placeholder for now
let dictionary = {
tokes: [
"toke"
],
serverCMD: [
"whisper",
"announce",
"serverannounce",
"clear",
"kick"
],
localCMD:[
"high"
]
};
return dictionary;
}
}
class commandProcessor{

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

@ -106,7 +106,7 @@ class emotePanel extends panelObj{
}
//Add the emote to the chatbox prompt
this.client.chatBox.chatPrompt.value += `[${emote}]`;
this.client.chatBox.catChat(`[${emote}]`);
}
addPersonalEmote(event){