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

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
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>