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

Started work on personal emotes.

Browse source
This commit is contained in:
rainbow napkin 2024-12-22 13:46:08 -05:00
parent db5fac83ab
commit a4a1f6a65b
16 changed files with 248 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app/channel/activeChannel.js
View file

@ -56,7 +56,8 @@ module.exports = class{
//await this.sendClientMetadata(userDB, socket);
await userObj.sendClientMetadata();
await userObj.sendSiteEmotes();
await userObj.sendChanEmotes();
await userObj.sendChanEmotes(chanDB);
await userObj.sendPersonalEmotes(userDB);
//Send out the userlist
this.broadcastUserList(socket.chan);

33
src/app/channel/chatHandler.js
View file

@ -17,6 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
//local imports
const commandPreprocessor = require('./commandPreprocessor');
const loggerUtils = require('../../utils/loggerUtils');
const linkUtils = require('../../utils/linkUtils');
const emoteValidator = require('../../validators/emoteValidator');
const {userModel} = require('../../schemas/userSchema');
module.exports = class{
@ -29,6 +31,7 @@ module.exports = class{
socket.on("chatMessage", (data) => {this.handleChat(socket, data)});
socket.on("setFlair", (data) => {this.setFlair(socket, data)});
socket.on("setHighLevel", (data) => {this.setHighLevel(socket, data)});
socket.on("addPersonalEmote", (data) => {this.addPersonalEmote(socket, data)});
}
handleChat(socket, data){
@ -79,6 +82,36 @@ module.exports = class{
}
}
async addPersonalEmote(socket, data){
//Sanatize and Validate input
const name = emoteValidator.manualName(data.name);
const link = emoteValidator.manualLink(data.link);
//If we received good input
if(link && name){
//Generate marked link object
var emote = await linkUtils.markLink(link);
//If the link we have is an image or video
if(emote.type == 'image' || emote.type == 'video'){
//Get user document from DB
const userDB = await userModel.findOne({user: socket.user.user})
//if we have a user in the DB
if(userDB != null){
//Convert marked link into emote object with 1 ez step for only $19.95
emote.name = name;
//add emote to user document emotes list
userDB.emotes.push(emote);
//Save user doc
await userDB.save();
}
}
}
}
relayUserChat(socket, msg, type, links){
const user = this.server.getSocketInfo(socket);
this.relayChat(user.user, user.flair, user.highLevel, msg, type, socket.chan, links)

1
src/app/channel/commandPreprocessor.js
View file

@ -46,6 +46,7 @@ module.exports = class commandPreprocessor{
//split the command
this.splitCommand();
//Process the command
await this.processServerCommand();

15
src/app/channel/connectedUser.js
View file

@ -19,6 +19,7 @@ const channelModel = require('../../schemas/channel/channelSchema');
const permissionModel = require('../../schemas/permissionSchema');
const flairModel = require('../../schemas/flairSchema');
const emoteModel = require('../../schemas/emoteSchema');
const { userModel } = require('../../schemas/userSchema');
module.exports = class{
constructor(userDB, chanRank, channel, socket){
@ -111,6 +112,20 @@ module.exports = class{
this.emit('chanEmotes', emoteList);
}
async sendPersonalEmotes(userDB){
//if we wherent handed a channel document
if(userDB == null){
//Pull it based on channel name
userDB = await userModel.findOne({user: this.user});
}
//Pull emotes from channel
const emoteList = userDB.getEmotes();
//Send it off to the user
this.emit('personalEmotes', emoteList);
}
updateFlair(flair){
this.flair = flair;

7
src/schemas/channel/channelSchema.js
View file

@ -19,13 +19,17 @@ const {mongoose} = require('mongoose');
const {validationResult, matchedData} = require('express-validator');
//Local Imports
//Server
const server = require('../../server');
//DB Models
const statModel = require('../statSchema');
const {userModel} = require('../userSchema');
const permissionModel = require('../permissionSchema');
const emoteModel = require('../emoteSchema');
//DB Schemas
const channelPermissionSchema = require('./channelPermissionSchema');
const channelBanSchema = require('./channelBanSchema');
//Utils
const { exceptionHandler, errorHandler } = require('../../utils/loggerUtils');
const channelSchema = new mongoose.Schema({
@ -77,7 +81,7 @@ const channelSchema = new mongoose.Schema({
type: mongoose.SchemaTypes.String,
required: true
}],
//Not re-using the site-wide schema because post save should call different functions
//Not re-using the site-wide schema because post/pre save should call different functions
emotes: [{
name:{
type: mongoose.SchemaTypes.String,
@ -178,6 +182,7 @@ channelSchema.pre('save', async function (next){
}
}
//if emotes where modified
if(this.isModified('emotes')){
//Get the active Channel object from the application side of the house
const activeChannel = server.channelManager.activeChannels.get(this.name);

54
src/schemas/userSchema.js
View file

@ -18,10 +18,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
const {mongoose} = require('mongoose');
//local imports
//server
const server = require('../server');
//DB Models
const statModel = require('./statSchema');
const flairModel = require('./flairSchema');
const permissionModel = require('./permissionSchema');
const emoteModel = require('./emoteSchema');
//Utils
const hashUtil = require('../utils/hashUtils');
@ -40,7 +44,9 @@ const userSchema = new mongoose.Schema({
required: true
},
email: {
type: mongoose.SchemaTypes.String
type: mongoose.SchemaTypes.String,
optional: true,
default: ""
},
date: {
type: mongoose.SchemaTypes.Date,
@ -92,7 +98,24 @@ const userSchema = new mongoose.Schema({
type: mongoose.SchemaTypes.ObjectID,
default: null,
ref: "flair"
}
},
//Not re-using the site-wide schema because post/pre save should call different functions
emotes: [{
name:{
type: mongoose.SchemaTypes.String,
required: true
},
link:{
type: mongoose.SchemaTypes.String,
required: true
},
type:{
type: mongoose.SchemaTypes.String,
required: true,
enum: emoteModel.typeEnum,
default: emoteModel.typeEnum[0]
}
}]
});
//This is one of those places where you really DON'T want to use an arrow function over an anonymous one!
@ -124,6 +147,15 @@ userSchema.pre('save', async function (next){
await this.killAllSessions("Your site-wide rank has changed. Sign-in required.");
}
//if emotes where modified
if(this.isModified('emotes')){
//Get the active Channel object from the application side of the house
server.channelManager.crawlConnections(this.user, (conn)=>{
//Send out emotes to each one
conn.sendPersonalEmotes(this);
});
}
//All is good, continue on saving.
next();
});
@ -347,6 +379,24 @@ userSchema.methods.getTokeCount = function(){
return tokeCount;
}
userSchema.methods.getEmotes = function(){
//Create an empty array to hold our emote list
const emoteList = [];
//For each channel emote
this.emotes.forEach((emote) => {
//Push an object with select information from the emote to the emote list
emoteList.push({
name: emote.name,
link: emote.link,
type: emote.type
});
});
//return the emote list
return emoteList;
}
//note: if you gotta call this from a request authenticated by it's user, make sure to kill that session first!
userSchema.methods.killAllSessions = async function(reason = "A full log-out from all devices was requested for your account."){
//get authenticated sessions

28
src/validators/emoteValidator.js
View file

@ -16,8 +16,34 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
//NPM Imports
const { check } = require('express-validator');
const validator = require('validator');//We need validators for express-less code too!
module.exports = {
name: (field = 'name') => check(field).escape().trim().isAlphanumeric().isLength({min: 1, max: 14}),
link: (field = 'link') => check(field).trim().isURL()
link: (field = 'link') => check(field).trim().isURL(),
manualName: (input) => {
//Trim and sanatize input
const clean = validator.trim(validator.escape(input));
//if cleaned input is a proper emote name
if(validator.isLength(clean, {min: 1, max: 14}) && validator.isAlphanumeric(clean)){
//return cleaned input
return clean;
}
//otherwise return false
return false;
},
manualLink: (input) => {
//Trim the input
const clean = validator.trim(input)
//If we have a URL return the trimmed input
if(validator.isURL(clean)){
return clean;
}
//otherwise return false
return false;
}
}

2
src/views/channel.ejs
View file

@ -64,7 +64,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
<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" id="chat-panel-user-count">NULL Users</p>
<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">

1
www/css/channel.css
View file

@ -216,7 +216,6 @@ span.user-entry{
#chat-panel-user-count{
white-space: nowrap;
user-select: none;
cursor:pointer;
}
#media-panel-show-chat-icon{

5
www/css/global.css
View file

@ -69,6 +69,11 @@ div.dynamic-container{
overflow: auto;
}
.interactive{
cursor: pointer;
user-select: none;
}
/* Navbar */
#navbar{
display: flex;

19
www/css/panel/emote.css
View file

@ -22,10 +22,10 @@
div.emote-panel-list-emote{
width: 9em;
display: flex;
position: relative;
flex-direction: column;
padding: 0.5em 0;
margin: 0.5em;
user-select: none;
cursor: pointer;
}
@ -43,6 +43,7 @@ p.emote-list-title{
max-height: 8em;
max-width: 8em;
margin: auto;
object-fit: contain;
}
.emote-list-big-media{
@ -63,3 +64,19 @@ div.panel-control-prompt{
#new-emote-button{
margin-left: 0.3em;
}
span.emote-list-trash-icon{
position: absolute;
display: flex;
width: 1.5em;
height: 1.5em;
border-radius: 1em;
top: -0.5em;
right: -0.5em;
}
i.emote-list-trash-icon{
flex: 1;
text-align: center;
margin: auto;
}

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

@ -366,3 +366,8 @@ div.emote-panel-list-emote{
border: 1px solid var(--focus0-alt1);
box-shadow: var(--focus-glow0-alt0), var(--focus-glow0-alt0-inset);
}
span.emote-list-trash-icon{
background-color: var(--bg2);
border: 1px solid var(--accent0)
}

1
www/js/channel/chatPostprocessor.js
View file

@ -32,6 +32,7 @@ class chatPostprocessor{
//Inject the pre-processed chat into the chatEntry node
this.injectBody();
//Return the pre-processed node
return this.chatEntry;
}

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

@ -16,6 +16,7 @@ class commandPreprocessor{
//When we receive site-wide emote list
this.client.socket.on("siteEmotes", this.setSiteEmotes.bind(this));
this.client.socket.on("chanEmotes", this.setChanEmotes.bind(this));
this.client.socket.on("personalEmotes", this.setPersonalEmotes.bind(this));
}
preprocess(command){
@ -104,6 +105,10 @@ class commandPreprocessor{
this.emotes.chan = data;
}
setPersonalEmotes(data){
this.emotes.personal = data;
}
getEmoteByLink(link){
//Create an empty variable to hold the found emote
var foundEmote = null;

37
www/js/channel/cpanel.js
View file

@ -73,7 +73,11 @@ class cPanel{
this.activePanel.docSwitch();
}
hideActivePanel(){
hideActivePanel(event, keepAlive = false){
if(!keepAlive){
this.activePanel.closer();
}
//Hide the panel
this.activePanelDiv.style.display = "none";
//Clear out the panel
@ -84,12 +88,12 @@ class cPanel{
pinPanel(){
this.setPinnedPanel(this.activePanel, this.activePanelDoc.innerHTML);
this.hideActivePanel();
this.hideActivePanel(null, true);
}
popActivePanel(){
this.popPanel(this.activePanel, this.activePanelDoc.innerHTML);
this.hideActivePanel();
this.hideActivePanel(null, true);
}
async setPinnedPanel(panel, panelBody){
@ -113,19 +117,24 @@ class cPanel{
this.pinnedPanelDragger.fixCutoff();
}
hidePinnedPanel(){
hidePinnedPanel(event, keepAlive = false){
this.pinnedPanelDiv.style.display = "none";
if(!keepAlive){
this.pinnedPanel.closer();
}
this.pinnedPanel = null;
}
unpinPanel(){
this.setActivePanel(this.pinnedPanel, this.pinnedPanelDoc.innerHTML);
this.hidePinnedPanel();
this.hidePinnedPanel(null, true);
}
popPinnedPanel(){
this.popPanel(this.pinnedPanel, this.pinnedPanelDoc.innerHTML);
this.hidePinnedPanel();
this.hidePinnedPanel(null, true);
}
popPanel(panel, panelBody){
@ -154,6 +163,10 @@ class panelObj{
docSwitch(){
}
closer(){
console.log('closer');
}
}
class poppedPanel{
@ -174,6 +187,8 @@ class poppedPanel{
//Functions
this.cPanel = cPanel;
this.keepAlive = false;
//Continue constructor asynchrnously
this.asyncConstructor();
}
@ -221,13 +236,19 @@ class poppedPanel{
}
closer(){
this.cPanel.poppedPanels.splice(this.cPanel.poppedPanels.indexOf(this),1);
if(!this.keepAlive){
this.panel.closer();
}
this.cPanel.poppedPanels.splice(this.cPanel.poppedPanels.indexOf(this),1);
}
unpop(){
//Set active panel
this.cPanel.setActivePanel(this.panel, this.panelDoc.innerHTML);
this.keepAlive = true;
//Close the popped window
this.window.close();
}
@ -235,6 +256,8 @@ class poppedPanel{
pin(){
this.cPanel.setPinnedPanel(this.panel, this.panelDoc.innerHTML);
this.keepAlive = true;
this.window.close();
}

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

@ -1,6 +1,13 @@
class emotePanel extends panelObj{
constructor(client, panelDocument){
super(client, "Emote Palette", "/panel/emote", panelDocument);
this.client.socket.on("personalEmotes", this.renderEmoteLists.bind(this));
}
closer(){
this.client.socket.off("personalEmotes", this.renderEmoteLists.bind(this));
console.log('emote closer');
}
docSwitch(){
@ -19,6 +26,10 @@ class emotePanel extends panelObj{
this.searchPrompt = this.panelDocument.querySelector('#emote-panel-search-prompt');
this.personalEmoteLinkPrompt = this.panelDocument.querySelector('#new-emote-link-input');
this.personalEmoteNamePrompt = this.panelDocument.querySelector('#new-emote-name-input');
this.personalEmoteAddButton = this.panelDocument.querySelector('#new-emote-button');
this.setupInput();
this.renderEmoteLists();
@ -46,6 +57,9 @@ class emotePanel extends panelObj{
this.searchPrompt.removeEventListener('keyup', this.renderEmoteLists.bind(this));
this.searchPrompt.addEventListener('keyup', this.renderEmoteLists.bind(this));
this.personalEmoteAddButton.removeEventListener("click", this.addPersonalEmote.bind(this));
this.personalEmoteAddButton.addEventListener("click", this.addPersonalEmote.bind(this));
}
toggleSiteEmotes(event){
@ -72,7 +86,7 @@ class emotePanel extends panelObj{
useEmote(emote){
//If we're using this from the active panel
if(client.cPanel.activePanel == this){
if(this.client.cPanel.activePanel == this){
//Close it
this.client.cPanel.hideActivePanel();
}
@ -81,6 +95,19 @@ class emotePanel extends panelObj{
this.client.chatBox.chatPrompt.value += `[${emote}]`;
}
addPersonalEmote(event){
//Collect input
const name = this.personalEmoteNamePrompt.value;
const link = this.personalEmoteLinkPrompt.value;
//Empty out prompts
this.personalEmoteNamePrompt.value = '';
this.personalEmoteLinkPrompt.value = '';
//Send emote to server
this.client.socket.emit("addPersonalEmote", {name, link});
}
renderEmoteLists(){
var search = this.searchPrompt.value;
@ -102,10 +129,10 @@ class emotePanel extends panelObj{
this.renderEmotes(siteEmotes, this.siteEmoteList);
this.renderEmotes(chanEmotes, this.chanEmoteList);
this.renderEmotes(personalEmotes, this.personalEmoteList);
this.renderEmotes(personalEmotes, this.personalEmoteList, true);
}
renderEmotes(emoteList, container){
renderEmotes(emoteList, container, personal = false){
//Clear out the container
container.innerHTML = '';
@ -165,6 +192,23 @@ class emotePanel extends panelObj{
//Set emote title
emoteTitle.innerHTML = `[${emote.name}]`;
//if we're rendering personal emotes
if(personal){
//create span to hold trash icon
const trashSpan = document.createElement('span');
trashSpan.classList.add('emote-list-trash-icon');
//Create trash icon
const trashIcon = document.createElement('i');
trashIcon.classList.add('emote-list-trash-icon', 'bi-trash-fill');
//Add trash icon to trash span
trashSpan.appendChild(trashIcon);
//append trash span to emote div
emoteDiv.appendChild(trashSpan);
}
//Add the emote media to the emote span
emoteDiv.appendChild(emoteMedia);
//Add title paragraph node