index.js

import { join, basename, dirname, extname, normalize } from "path"
import shortid from 'shortid'
import randomColorRGB from 'random-color-rgb'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

import listFolder from './src/events/list_folder'
import tabCreated from './src/events/tab_created'
import readFile from './src/events/read_file'
import writeFile from './src/events/write_file'
import userJoined from './src/events/user_joined'
import configDialog from './src/config_dialog'

import { sanitizePath, getExtension }from './src/utils'

import { createHash } from 'crypto'
import simpleEncryptor from 'simple-encryptor'

class Instance {
	constructor({ emitter, room, username, password }){
		this.room = room
		this.username = username
		this.userid = shortid.generate()
		this.usercolor = randomColorRGB({min: 70})
		this.password = createHash('sha256').update(password).digest()
		this.emitter = emitter
		this.emitter.data = this
		this.sharedFolders = {}
		this.conn = new WebSocket('wss://graviton-api.herokuapp.com/websockets')
		this.roomcode = `${this.room}##${password}`
		this.encryptor = simpleEncryptor(password)
		
		this.conn.onopen = () => {
			//Tell the whole room you joined
			this.send('userJoin',{
				username: this.username
			})
			
			setInterval(() => {
				//Send a ping to the connection socket, so it doesn't die
				this.send('connectionPing',{})
				
			}, 30000)
			
			this.emitter.emit('instance/connected',{
				room: this.room,
				username: this.username,
				userid: this.userid,
				usercolor: this.usercolor
			})
		}

		this.conn.onerror = error => {
			this.emitter.emit('error', error)
		}

		this.conn.onmessage = e => {
			const { encrypted = true, userid, usercolor, username, type, data} = JSON.parse(e.data)
			
			const decryptedData = encrypted ? this.encryptor.decrypt(data) : JSON.parse(data)
			
			this.emitter.emit(`room/${type}`, {
				...decryptedData,
				senderUsername: username,
				senderUserid: userid,
				senderUsercolor: usercolor
			})
		}
		this.emitter.on('message', data => {
			this.send(data.type, data.content)
		})
		this.emitter.on('disconnect', data => {
			this.conn.close()
		})
	}
	send(eventName, data = {}){
		
		const encryptedData = this.encryptor.encrypt(data)

		this.conn.send(JSON.stringify(
			{
				username: this.username,
				usercolor: this.usercolor,
				userid: this.userid,
				room: this.room,
				type: eventName,
				data: encryptedData,
				encrypted: true
			}
		))
	}
	on(eventName, args){
		return this.emitter.on(eventName, args)
	}
	waitToConnect(){
		return new Promise((res) => {
			this.on('instance/connected', () => res())
		})
	}
}


export function entry(API){
	const { drac: { Button }, puffin, StatusBarItem, ContextMenu, Notification, RunningConfig } = API 
	const emitter = new puffin.state()
	createSidePanel(emitter,API)
	let sharing = false
	RunningConfig.emit('addLocalTerminalAccessory',{
		menu(state){
			const terminalID = shortid.generate()
			
			let terminalOutputListener
			let terminalBrokenLineListener
			let terminalInputListener

			function onClick(){
				sharing = !sharing

				if(sharing){
					emitter.emit('message',{
						type: 'terminalShared',
						content: {
							terminalID
						}
					})
					terminalOutputListener = emitter.on('room/terminalOutput',({ data, terminalID: senderTerminalID }) => {
						if(senderTerminalID === terminalID){
							state.emit('data', data)
						}
						
					})
					terminalBrokenLineListener = emitter.on('room/terminalBreakLine', ({ terminalID: senderTerminalID }) => {
						if(senderTerminalID === terminalID){
							state.emit('breakLine')
						}
					})
					terminalInputListener = state.on('write', (data) => {
						emitter.emit('message',{
							type: 'terminalUpdated',
							content: {
								data,
								terminalID
							}
						})
					})
				}else{
					emitter.emit('message',{
						type: 'terminalUnshared',
						content: {
							terminalID
						}
					})
					terminalOutputListener.cancel()
					terminalBrokenLineListener.cancel()
					terminalInputListener.cancel()
				}
			}
			
			if(sharing){
				return [
					{
						label: 'Unshare',
						action: onClick
					}
				]
			} else {
				return [
					{
						label: 'Share',
						action: onClick
					}
				]
			}
			
		}
	})
	
	new StatusBarItem({
		label: 'Remote',
		action(e){
			new ContextMenu({
				parent: e.target,
				list:[
					{
						label: 'Join',
						action: async function(){
							const { room, password, username } = await configDialog(API) 

							const my_instance = new Instance({
								emitter,
								room, 
								password, 
								username
							})

							await my_instance.waitToConnect()

							new Notification({
								title: `Joined #${room} as ${username}`,
								content: ''
							})
							handleEvents(emitter, API)
						}
					},
					{
						label: 'Disconnect',
						action(){
							emitter.emit('instance/disconnect',{})
						}
					}
				],
				event: e
			})
		}
	})
}

function handleEvents(emitter,API){
	const { RunningConfig } = API
	
	emitter.on('room/terminalShared', async ({ senderUsername, terminalID: originalTerminalID }) => {
		RunningConfig.emit('registerTerminalShell',{
			name: `remote:${originalTerminalID}@${senderUsername}`,
			onCreated(state){
				emitter.on('room/terminalUpdated',({ data, senderUsername: terminalAuthor, terminalID }) => {
					if(senderUsername === terminalAuthor && originalTerminalID === terminalID){
						state.emit('write', data)
					}
				})
				
				state.on('keyPressed',(key) => {
					if(key === 'Enter'){
						emitter.emit('message', {
							type: 'terminalBreakLine',
							content: {
								terminalID: originalTerminalID
							}
						})
					}
				})
				
				state.on('data', (data) => {
					emitter.emit('message', {
						type: 'terminalOutput',
						content:{
							data,
							terminalID: originalTerminalID
						}
					})
				})
			}
		})
	})
	
	emitter.on('room/terminalUnshared', async ({ senderUsername, terminalID: originalTerminalID }) => {
		RunningConfig.emit('unregisterTerminalShell',{
			name: `remote:${originalTerminalID}@${senderUsername}`
		})
	})

	const validPath = (path) => {
		const sanitizedPath = sanitizePath(path)
		return new Promise((res) => {
			Object.keys(emitter.data.sharedFolders).find(p => {
				if(sanitizedPath.match(p)){
					res(true)
					return
				}
			})
			res(false)
		})
	}
	
	emitter.on('room/listFolder', async ({ folderPath }) => {
		if(!await validPath(folderPath)) return
		listFolder({
			emitter,
			folderPath
		})
	})
	emitter.on('room/getFileContent', async ({ filePath }) => {
		if(!await validPath(filePath)) return
		readFile({
			emitter,
			filePath
		})
	})
	emitter.on('room/writeFileContent', async ({ filePath, fileContent }) => {
		if(!await validPath(filePath)) return
		writeFile({
			emitter,
			filePath,
			fileContent
		})
	})
	emitter.on('room/userJoin', async ({ senderUsername }) => {
		userJoined({
			room: emitter.data.room,
			username: senderUsername,
			...API
		})
	})
	emitter.on('room/welcome', async ({ users }) => {
		users.map(({ username, userid, usercolor }) => {
			if(userid === emitter.data.userid) return
			emitter.emit('room/userJoin',{
				senderUsername: username,
				senderUserid: userid,
				senderUsercolor: usercolor
			})
		})
	})
	RunningConfig.on('aTabHasBeenCreated', ({ directory, client, instance, tabElement }) => {
		tabCreated({
			emitter,
			directory,
			client,
			instance,
			tabElement,
			...API
		})
	})
}

const createSidePanel = (emitter,API) => {
	const { puffin, SidePanel, Explorer, FilesExplorer, RunningConfig } = API
	const iconStyle = puffin.style`
		& > * {
			stroke: var(--iconFill);
		}
		& > path {
			fill: var(--iconFill)
		}
	`
	new SidePanel({
		icon(){
			return  puffin.element`
				<svg class="${iconStyle}" width="26" height="22" viewBox="0 0 26 22" fill="none" xmlns="http://www.w3.org/2000/svg">
					<rect x="1" y="17.2105" width="9.36842" height="3.68421" rx="1.84211" stroke-width="2"/>
					<circle cx="5.46677" cy="11.7831" r="2.9048" stroke-width="2"/>
					<rect x="16" y="12.5263" width="8.6579" height="3.68421" rx="1.84211"stroke-width="2"/>
					<circle cx="20.1912" cy="6.9048" r="2.9048" stroke-width="2"/>
					<path d="M1 2.5C1 1.11929 2.11929 0 3.5 0H11.0153C12.1114 0 13 0.888575 13 1.98469V1.98469C13 2.326 13.055 2.66507 13.163 2.98887L13.2746 3.32366C13.4247 3.77399 13.6065 4.21309 13.8188 4.63766L14.2615 5.52295C14.4827 5.96543 13.9957 6.42612 13.5662 6.18068L12.6529 5.65878C11.8974 5.22708 11.0423 5 10.1722 5H7H3.5C2.11929 5 1 3.88071 1 2.5V2.5Z" />
				</svg>
			`
		},
		panel(){
			function mounted(){
				const activeUsers = {}
				const openedFolders = {}
				const getCurrentUsers = () => {
					return Object.keys(activeUsers).map( userid => {
						const { username, usercolor, isMe } = activeUsers[userid]
						return {
							label:  username,
							decorator:{
								label: isMe? 'You': '',
								background: usercolor
							},
							iconComp(){
								return puffin.element`
									<svg width="20" height="20" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M9 38.2727C9 32.6494 13.5586 28.0909 19.1818 28.0909H26.8182C32.4414 28.0909 37 32.6494 37 38.2727V38.2727H9V38.2727Z" fill="#919191"/>
										<path d="M11.5454 20.4545C11.5454 14.1284 16.6738 9 23 9V9C29.3262 9 34.4545 14.1284 34.4545 20.4545V20.4545C34.4545 26.7807 29.3262 31.9091 23 31.9091V31.9091C16.6738 31.9091 11.5454 26.7807 11.5454 20.4545V20.4545Z" fill="#919191"/>
									</svg>
								`
							}
						}
					})
				}
				
				const usersExplorer = new Explorer({
					items:[
						{
							label:  'Users',
							decorator:{
								label: '0'
							},
							items: [],
							iconComp(){
								return puffin.element`
									<svg width="20" height="20" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M16 29.9999C16 26.1579 19.1145 23.0434 22.9565 23.0434H29.0435C32.8855 23.0434 36 26.1579 36 29.9999V29.9999H16V29.9999Z" fill="#919191"/>
										<path d="M17.8182 17.8261C17.8182 13.5039 21.322 10 25.6443 10H26.3557C30.6779 10 34.1818 13.5039 34.1818 17.8261V17.8261C34.1818 22.1483 30.6779 25.6522 26.3557 25.6522H25.6442C21.322 25.6522 17.8182 22.1483 17.8182 17.8261V17.8261Z" fill="#919191"/>
										<path d="M10 33.9999C10 30.1579 13.1145 27.0434 16.9565 27.0434H23.0435C26.8855 27.0434 30 30.1579 30 33.9999V33.9999H10V33.9999Z" fill="#A4A4A4"/>
										<path d="M11.8182 21.8261C11.8182 17.5039 15.322 14 19.6443 14H20.3557C24.6779 14 28.1818 17.5039 28.1818 21.8261V21.8261C28.1818 26.1483 24.6779 29.6522 20.3557 29.6522H19.6442C15.322 29.6522 11.8182 26.1483 11.8182 21.8261V21.8261Z" fill="#A4A4A4"/>
									</svg>
								`
							},
							mounted({ setItems, setDecorator }){
								emitter.on('instance/connected',({ room, userid, username, usercolor }) => {
									activeUsers[userid] = {
										username,
										usercolor,
										isMe : true
									}
									const currentUsers = getCurrentUsers()
									setItems(currentUsers)
									setDecorator({
										label: Object.keys(currentUsers).length
									})
									document.getElementById('room_name').innerText = room
									
									dayjs.extend(relativeTime)
									const startedDate = dayjs(new Date())
									setInterval(() => {
										document.getElementById('time_counter').innerText = startedDate.fromNow()
									})
									
								})
								emitter.on('room/userJoin', ({ senderUserid, senderUsername, senderUsercolor }) => {
									activeUsers[senderUserid] = {
										username: senderUsername,
										usercolor: senderUsercolor,
										isMe : false
									}
									const currentUsers = getCurrentUsers()
									setItems(currentUsers)
									setDecorator({
										label: Object.keys(currentUsers).length
									})
								})
								emitter.on('room/userDisconnected', ({ userid, username, usercolor }) => {
									delete activeUsers[userid]
									const currentUsers = getCurrentUsers()
									setItems(currentUsers)
									setDecorator({
										label: Object.keys(currentUsers).length
									})
								})
								emitter.on('disconnect',()=>{
									delete activeUsers[emitter.data.me.userid]
									setDecorator({
										label: '0'
									})
									setItems([])
								})
							}
						},{
							label: 'Folders',
							icon: 'folder.closed',
							mounted({ setItems }){
								RunningConfig.on('addFolderToRunningWorkspace', ({ folderPath }) => {
									let fPath = sanitizePath(folderPath)
									openedFolders[fPath] = false
									setItems(getFoldersItems(setItems))
								})
							},
							items: []
						}
					]
				})
				puffin.render(usersExplorer,this.querySelector("#users"))
				
			
				function getFoldersItems(setItems){
					return Object.keys(openedFolders).map((path) => {
						let state = openedFolders[path]
						return {
							label: path,
							decorator:{
								label: state ? '🔊' : ''
							},
							action(e, { setLabel, setDecorator }){
								state = !state
								const sanitizedPath = sanitizePath(path)
								openedFolders[path] = state
								if(state){
									emitter.data.sharedFolders[sanitizedPath] = state
									emitter.emit('message',{
										type: 'openedFolder',
										content: {
											folderPath: sanitizedPath
										}
									})
									setDecorator({
										label: '🔊'
									})
								}else{
									delete emitter.data.sharedFolders[sanitizedPath]
									emitter.emit('message',{
										type: 'closedFolder',
										content: {
											folderPath: sanitizedPath
										}
									})
									setDecorator({
										label: ''
									})
								}
								setItems(getFoldersItems(setItems))
							}
						}
					})
				}
				let sharedExplorers = []
				
				emitter.on('room/closedFolder', async ({ folderPath }) => {
					console.log(folderPath, sharedExplorers)
					sharedExplorers.forEach(explorer => {
						if(explorer.projectPath === folderPath){
							explorer.itemElement.instance.itemState.emit('destroyed')
						}
					})
				})
				
				emitter.on('room/openedFolder', async ({ folderPath, senderUserid, senderUsername }) => {
					
					const explorerInstance = new FilesExplorer(folderPath, folderPath, document.getElementById('explorer_panel'), 0, false, null, {
						provider: {
							decorator:{
								text: `remote@${senderUsername}`
							},
							listDir: async function(path){
								return await getItemsInFolder(emitter, path, senderUserid)
							},
							isGitRepo(){
								return new Promise( res => res(false))
							},
							readFile: function (path) {
								return new Promise( async (res) => {
									
									emitter.once('room/returnGetFileContent',({
										filePath,
										fileContent
									}) => {
										if(filePath === sanitizePath(path)){
											res(fileContent)
										}
									})
									emitter.emit('message',{
										type: 'getFileContent',
										content: {
											filePath: sanitizePath(path)
										}
									})
								})
							},
							writeFile: function (filePath, fileContent) {
								return new Promise( async (res) => {
									emitter.emit('message',{
										type: 'writeFileContent',
										content: {
											filePath,
											fileContent
										}
									})
									res()
								})
							}
						}
					})
					sharedExplorers.push(explorerInstance)
				})
			}
			const wrapperStyle = puffin.style`
				& p {
					color: var(--textColor);
					font-size: 12px;
					margin: 2px 15px;
				}
			`
			
			return puffin.element`
				<div class="${wrapperStyle}"mounted="${mounted}">
					${getInfoCards(emitter, API)}
					<div id="users"/>
				</div>
			`
		}
	})
}

const getInfoCards = (emitter, API) => {
	const { puffin, drac, Dialog } = API
	const cardStyle = puffin.style`
		& > div{
			background: var(--sidebarBackground);
			border-radius: 15px;
			height: 110px;
			width: 110px;
			padding: 30px 15px;
			user-select: none;
			overflow: hidden;
		}
		& > div > h6 {
			margin: 3px 0px;
			font-size: 11px;
			font-weight: bold;
		}
		& > div >  span {
			font-size: 13px;
			color: var(--accentColor);
			margin: 2px 0px;
		}
	`
	
	function shareRoom(){
		const codeDialog = new Dialog({
			title: `Room's Code`,
			component(){
				return puffin.element`<p style="user-select: all; word-break: break-all;">${emitter.data.roomcode}</p>`
			},
			buttons:[
				{
					label: 'misc.Accept'
				}
			]
		})
		codeDialog.launch()
	}
	
	return puffin.element({
		components:{
			Card: drac.Card
		}
	})`
		<div class="${cardStyle}">
			<Card :click="${shareRoom}">
				<h6>SHARE ROOM</h6>
				<span id="room_name">None</span>
			</Card>
			<Card>
				<h6>TIME</h6>
				<span id="time_counter">None</span>
			</Card>
		</div>
	`
}

const getItemsInFolder = async (emitter, folderPath, useridServer) => {
	return new Promise(resolve => {
		emitter.emit('message',{
			type: 'listFolder',
			userids: [useridServer],
			content: {
				folderPath
			}
		})
		emitter.once('room/returnlistFolder',({ folderPath: returnedFolderPath, folderItems })=>{
			if( folderPath === returnedFolderPath ){
				resolve(folderItems)
			}
		})
	})
}