This commit is contained in:
Piyush मिश्रः 2021-05-10 20:27:34 +05:30
parent 65ecc030b8
commit 46eced24ce
6 changed files with 64 additions and 50 deletions

View File

@ -6,36 +6,6 @@
src: url("../img/Itim-Regular.ttf"); src: url("../img/Itim-Regular.ttf");
} }
:root {
--bg-color: #ffffff;
--bg-secondary-color: #f3f3f6;
--bg-tertiary-color: #cacad8;
--color-primary: #14854F;
--color-lightGrey: #d2d6dd;
--color-border: #d2d6dd;
--color-grey: #747681;
--color-darkGrey: #3f4144;
--color-error: #d43939;
--color-success: #28bd14;
--grid-maxWidth: 120rem;
--grid-gutter: 2rem;
--font-size: 1.8rem;
--font-color: #333333;
--font-family-sans: "Itim";
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
--msg-other-bg-color : rgb(97, 182, 238);
--msg-me-bg-color : rgb(92, 175, 148);
--msg-reply-bg-color : rgb(209, 215, 219);
--msg-other-border-color : rgb(62, 127, 212);
--msg-me-border-color : rgb(64, 148, 116);
--msg-reply-border-color : rgb(94, 100, 105);
--msg-other-border-sel-color : rgb(58, 90, 139);
--msg-me-border-sel-color : rgb(48, 105, 86);
--svg-filter: none;
}
* { * {
scrollbar-width: auto; scrollbar-width: auto;
} }
@ -262,9 +232,7 @@ input {
} }
.clip-win.selected-clip { .clip-win.selected-clip {
width: fit-content;
min-width: 250px; min-width: 250px;
height: fit-content;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
border-radius: 15px; border-radius: 15px;

View File

@ -4,10 +4,43 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<style>
:root {
--bg-color: #ffffff;
--bg-secondary-color: #f3f3f6;
--bg-tertiary-color: #cacad8;
--color-primary: #14854F;
--color-lightGrey: #d2d6dd;
--color-border: #d2d6dd;
--color-grey: #747681;
--color-darkGrey: #3f4144;
--color-error: #d43939;
--color-success: #28bd14;
--grid-maxWidth: 120rem;
--grid-gutter: 2rem;
--font-size: 1.8rem;
--font-color: #333333;
--font-family-sans: "Itim";
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
--msg-other-bg-color : rgb(97, 182, 238);
--msg-me-bg-color : rgb(92, 175, 148);
--msg-reply-bg-color : rgb(209, 215, 219);
--msg-other-border-color : rgb(62, 127, 212);
--msg-me-border-color : rgb(64, 148, 116);
--msg-reply-border-color : rgb(94, 100, 105);
--msg-other-border-sel-color : rgb(58, 90, 139);
--msg-me-border-sel-color : rgb(48, 105, 86);
--svg-filter: none;
}
</style>
<title>Lupt Chat</title> <title>Lupt Chat</title>
</head> </head>
<body> <body>
<div id="progress" class="bg-sec" style="z-index: 9999; position: fixed; top: 0; bottom: 0;width: 100%; height: 100%;"> <div id="progress"
style="z-index: 9999; position: fixed; top: 0; bottom: 0;
width: 100%; height: 100%; background-color: var(--bg-secondary-color);">
<div style="top: 50%; <div style="top: 50%;
left: 50%; left: 50%;
width:10em; width:10em;
@ -18,7 +51,8 @@
text-align: center; text-align: center;
"> ">
<img src="img/loading.svg" style="height: 100%;"> <img src="img/loading.svg" style="height: 100%;">
<button id="progress_button" class="button is-hidden" onclick="leave()">Close</button> <div id="initerror"></div>
<button id="progress_button" class="button" style="display: none;" onclick="leave()">Close</button>
</div> </div>
</div> </div>
<!-- Connect Screen --> <!-- Connect Screen -->

View File

@ -15,10 +15,13 @@ var vayakti = {};
var typing = []; var typing = [];
var no_name_message = false; var no_name_message = false;
// Connection opened // check if support ws
socket.addEventListener('open', function (event) { if(!('WebSocket' in window || 'MozWebSocket' in window)) {
$('#progress_button').removeClass('is-hidden'); $('initerror').text('Warning: Web Browser dosen\'t support websocket! Upgrade');
}
// Connection opened
socket.onopen = function(event) {
var params = window.location.search; var params = window.location.search;
params = params.substr(1,params.length).split('&'); params = params.substr(1,params.length).split('&');
@ -31,12 +34,18 @@ socket.addEventListener('open', function (event) {
frm.find('[name=kaksh_kunjika]').val(params[0]); frm.find('[name=kaksh_kunjika]').val(params[0]);
frm.find('[name=kunjika]').val(params[1]); frm.find('[name=kunjika]').val(params[1]);
frm.find('[name=name]').val(params[2]); frm.find('[name=name]').val(params[2]);
$('#progress_button').css('display', '');
connect(frm); connect(frm);
}); }
// Connection fail
socket.onerror = function(event) {
$('initerror').text('Warning: Failed to connect websocket! Refresh the '+
'page and if still don\'t work upgrade Web Browser');
}
// Listen for messages // Listen for messages
socket.addEventListener('message', function (event) { socket.onmessage = function(event) {
var j = JSON.parse(event.data); var j = JSON.parse(event.data);
switch(j.cmd) { switch(j.cmd) {
case 'resp': case 'resp':
@ -100,13 +109,13 @@ socket.addEventListener('message', function (event) {
}); });
break; break;
} }
}); }
function connect(frm) { function connect(frm) {
if(actions.has_key('join') || actions.has_key('leave')) return; if(actions.has_key('join') || actions.has_key('leave')) return;
var frm = $(frm); var frm = $(frm);
var data = {}; var data = {};
frm.serializeArray().forEach(el => { frm.serializeArray().forEach(function(el) {
if(typeof el.value == 'string') if(typeof el.value == 'string')
data[el.name] = el.value.trim(); data[el.name] = el.value.trim();
else else
@ -204,7 +213,7 @@ function changeColor() {
function refreshVayaktiList() { function refreshVayaktiList() {
var v = $('#vayakti_list'); var v = $('#vayakti_list');
v.empty(); v.empty();
Object.keys(vayakti).forEach((key) => { Object.keys(vayakti).forEach(function(key) {
v.append($('<tr>') v.append($('<tr>')
.append($('<td>').append(vayakti[key])) .append($('<td>').append(vayakti[key]))
.append($('<td>').append(key))); .append($('<td>').append(key)));
@ -216,6 +225,6 @@ function autosize(el){
el.style.cssText = 'height:auto; padding:0'; el.style.cssText = 'height:auto; padding:0';
el.style.cssText = 'height:' + el.scrollHeight + 'px'; el.style.cssText = 'height:' + el.scrollHeight + 'px';
$('#reply_clip').css('bottom', (el.scrollHeight + 10) + 'px'); $('#reply_clip').css('bottom', (el.scrollHeight + 10) + 'px');
$('#selected_clip').css('bottom', (el.scrollHeight + 10) + 'px'); $('#selected_clip').css('bottom', (el.scrollHeight + 25) + 'px');
},0); },0);
} }

View File

@ -1,6 +1,6 @@
var Camera = class { var Camera = class {
static setupCamera() { static setupCamera() {
$('#file-input')[0].addEventListener('change', (e) => { $('#file-input')[0].addEventListener('change', function(e) {
const file = e.target.files[0]; const file = e.target.files[0];
if (!file) { if (!file) {
return; return;
@ -19,11 +19,14 @@ var Camera = class {
reader.readAsDataURL(result); reader.readAsDataURL(result);
reader.onloadend = function() { reader.onloadend = function() {
var base64data = reader.result; var base64data = reader.result;
if(base64data.length > 63000 && mime != 'image/jpeg') { if(base64data.length > 63488 && mime != 'image/jpeg') {
base64data = null; base64data = null;
result = null; result = null;
Camera.compressImage(file, 0.7, 'image/jpeg'); Camera.compressImage(file, 0.7, 'image/jpeg');
return; return;
} else if(base64data.length > 63488 && mime == 'image/jpeg') {
window.alert('file is too large!');
return;
} }
socket.send(JSON.stringify({ socket.send(JSON.stringify({

View File

@ -4,7 +4,7 @@ let Messages = class {
var elm = $(elm); var elm = $(elm);
elm.toggleClass('active'); elm.toggleClass('active');
if($('.active').length == 0) if($('.message.active').length == 0)
$('#selected_clip').addClass('is-hidden'); $('#selected_clip').addClass('is-hidden');
else else
$('#selected_clip').removeClass('is-hidden'); $('#selected_clip').removeClass('is-hidden');
@ -49,7 +49,7 @@ let Messages = class {
if(elm.length > 0) elm.remove(); if(elm.length > 0) elm.remove();
if(typing.length == 0) return; if(typing.length == 0) return;
var text = ''; var text = '';
typing.forEach((val) => { typing.forEach(function(val) {
var name = vayakti[val]; var name = vayakti[val];
if(name == undefined) name = ""; if(name == undefined) name = "";
text += name+'('+val.substr(0,8)+')'+ ',' text += name+'('+val.substr(0,8)+')'+ ','
@ -98,7 +98,7 @@ let Messages = class {
else else
elm.append($('<div>', {class: 'message-by'}).append(vayakti[sender]+'('+sender.substr(0, 8)+')')) elm.append($('<div>', {class: 'message-by'}).append(vayakti[sender]+'('+sender.substr(0, 8)+')'))
} }
elm.append($('<img>', {src: src})); elm.append($('<img>', {src: src, width: 300}));
elm.click(function() { elm.click(function() {
Messages.pick(this); Messages.pick(this);
}); });

View File

@ -2,7 +2,7 @@ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').match
$('body').toggleClass('dark'); $('body').toggleClass('dark');
} }
$(document).ready(() => { $(document).ready(function() {
$(".tabs > a").click(function() { $(".tabs > a").click(function() {
var t = $(this); var t = $(this);