mami/src/mami.js/main.js
flash cf71bab92d Rewrote connection handling.
This has been in the works for over a month and might break things because it's a very radical change.
If it causes you to be unable to join chat, report it on the forum or try joining using the legacy chat on https://sockchat.flashii.net.
2024-04-17 15:42:50 +00:00

650 lines
22 KiB
JavaScript

window.Umi = { UI: {}, Protocol: { SockChat: { Protocol: {} } } };
#include animate.js
#include common.js
#include compat.js
#include conman.js
#include context.js
#include emotes.js
#include events.js
#include messages.js
#include mszauth.js
#include txtrigs.js
#include utility.js
#include weeb.js
#include worker.js
#include audio/autoplay.js
#include controls/views.js
#include eeprom/eeprom.js
#include settings/backup.js
#include settings/settings.js
#include sockchat/client.js
#include sockchat/handlers.js
#include sound/context.js
#include sound/osukeys.js
#include ui/chat-layout.js
#include ui/hooks.js
#include ui/input-menus.js
#include ui/loading-overlay.jsx
#include ui/markup.js
#include ui/menus.js
#include ui/ping.jsx
#include ui/settings.jsx
#include ui/toggles.js
#include ui/uploads.js
#include ui/view.js
(async () => {
const eventTarget = new MamiEventTargetWindow;
const ctx = new MamiContext(eventTarget);
Object.defineProperty(window, 'mami', { enumerable: true, value: ctx });
const views = new MamiViewsControl({ body: document.body });
ctx.views = views;
const loadingOverlay = new Umi.UI.LoadingOverlay('spinner', 'Loading...');
await views.push(loadingOverlay);
loadingOverlay.setMessage('Loading environment...');
try {
window.futami = await FutamiCommon.load();
} catch(ex) {
console.error(ex);
loadingOverlay.setIcon('cross');
loadingOverlay.setHeader('Failed!');
loadingOverlay.setMessage('Failed to load common settings!');
return;
}
loadingOverlay.setMessage('Fetching credentials...');
try {
const auth = await MamiMisuzuAuth.update();
if(!auth.ok)
throw 'Authentication failed.';
} catch(ex) {
console.error(ex);
location.assign(futami.get('login'));
return;
}
setInterval(() => {
MamiMisuzuAuth.update()
.then(auth => {
if(!auth.ok)
location.assign(futami.get('login'));
})
}, 600000);
loadingOverlay.setMessage('Loading settings...');
const settings = new MamiSettings('umi-', ctx.events.scopeTo('settings'));
ctx.settings = settings;
settings.define('style', 'string', 'dark');
settings.define('compactView', 'boolean', false);
settings.define('autoScroll', 'boolean', true);
settings.define('closeTabConfirm', 'boolean', false);
settings.define('showChannelList', 'boolean', false);
settings.define('fancyInfo', 'boolean', true);
settings.define('autoCloseUserContext', 'boolean', true);
settings.define('enableParser', 'boolean', true);
settings.define('enableEmoticons', 'boolean', true);
settings.define('autoParseUrls', 'boolean', true);
settings.define('preventOverflow', 'boolean', false);
settings.define('expandTextBox', 'boolean', false);
settings.define('eepromAutoInsert', 'boolean', true);
settings.define('autoEmbedV1', 'boolean', false);
settings.define('soundEnable', 'boolean', true, false, true);
settings.define('soundPack', 'string', 'ajax-chat');
settings.define('soundVolume', 'number', 80);
settings.define('soundEnableJoin', 'boolean', true);
settings.define('soundEnableLeave', 'boolean', true);
settings.define('soundEnableError', 'boolean', true);
settings.define('soundEnableServer', 'boolean', true);
settings.define('soundEnableIncoming', 'boolean', true);
settings.define('onlySoundOnMention', 'boolean', false);
settings.define('soundEnableOutgoing', 'boolean', true);
settings.define('soundEnablePrivate', 'boolean', true);
settings.define('soundEnableForceLeave', 'boolean', true);
settings.define('minecraft', ['no', 'yes', 'old'], 'no');
settings.define('windowsLiveMessenger', 'boolean', false);
settings.define('seinfeld', 'boolean', false);
settings.define('flashTitle', 'boolean', true);
settings.define('showServerMsgInTitle', 'boolean', true);
settings.define('onlyConnectWhenVisible', 'boolean', true);
settings.define('playJokeSounds', 'boolean', true);
settings.define('weeaboo', 'boolean', false);
settings.define('motivationalImages', 'boolean', false);
settings.define('motivationalVideos', 'boolean', false);
settings.define('osuKeys', 'boolean', false);
settings.define('osuKeysV2', ['no', 'yes', 'rng'], 'no');
settings.define('explosionRadius', 'number', 20);
settings.define('dumpPackets', 'boolean', FUTAMI_DEBUG);
settings.define('dumpEvents', 'boolean', FUTAMI_DEBUG);
settings.define('marqueeAllNames', 'boolean', false);
settings.define('tmpDisableOldThemeSys', 'boolean', false, false, true);
const noNotifSupport = !('Notification' in window);
settings.define('enableNotifications', 'boolean', false, noNotifSupport, true);
settings.define('notificationShowMessage', 'boolean', false, noNotifSupport);
settings.define('notificationTriggers', 'string', '', noNotifSupport);
loadingOverlay.setMessage('Loading sounds...');
const soundCtx = new MamiSoundContext;
ctx.sound = soundCtx;
try {
const sounds = await futami.getJson('sounds2');
if(Array.isArray(sounds.library))
soundCtx.library.register(sounds.library, true);
if(Array.isArray(sounds.packs))
soundCtx.packs.register(sounds.packs, true);
} catch(ex) {
console.error(ex);
}
if(!await MamiDetectAutoPlay()) {
settings.set('soundEnable', false);
settings.virtualise('soundEnable');
}
settings.watch('soundEnable', ev => {
if(ev.detail.value) {
if(!soundCtx.ready)
soundCtx.reset();
settings.touch('soundVolume');
settings.touch('soundPack');
soundCtx.library.play(soundCtx.pack.getEventSound('server'));
}
soundCtx.muted = !ev.detail.value;
});
settings.watch('soundPack', ev => {
const packs = soundCtx.packs;
if(!packs.has(ev.detail.value)) {
settings.delete(ev.detail.name);
return;
}
soundCtx.pack = packs.get(ev.detail.value);
if(!ev.detail.initial) soundCtx.library.play(soundCtx.pack.getEventSound('server'));
});
settings.watch('soundVolume', ev => {
soundCtx.volume = ev.detail.value / 100;
})
loadingOverlay.setMessage('Loading emoticons...');
try {
const emotes = await futami.getJson('emotes');
MamiEmotes.loadLegacy(emotes);
} catch(ex) {
console.error(ex);
}
const onHashChange = () => {
if(location.hash === '#reset') {
settings.clear(true);
location.assign('/');
}
};
window.addEventListener('hashchange', onHashChange);
onHashChange();
window.addEventListener('keydown', ev => {
if(ev.altKey && ev.shiftKey && (ev.key === 'R' || ev.key === 'r'))
location.hash = 'reset';
});
loadingOverlay.setMessage('Loading EEPROM...');
try {
await MamiEEPROM.init();
ctx.eeprom = new EEPROM('1', futami.get('eeprom2'), MamiMisuzuAuth.getLine);
} catch(ex) {
console.error(ex);
ctx.eeprom = undefined;
}
loadingOverlay.setMessage('Preparing UI...');
ctx.textTriggers = new MamiTextTriggers;
// should be dynamic when possible
const layout = new Umi.UI.ChatLayout;
await views.unshift(layout);
Umi.UI.View.AccentReload();
Umi.UI.Hooks.AddHooks();
settings.watch('style', ev => { if(!ev.detail.initial) Umi.UI.View.AccentReload(); });
settings.watch('compactView', ev => { if(!ev.detail.initial) Umi.UI.View.AccentReload(); });
settings.watch('preventOverflow', ev => document.body.classList.toggle('prevent-overflow', ev.detail.value));
settings.watch('tmpDisableOldThemeSys', ev => { if(!ev.detail.initial) Umi.UI.View.AccentReload(); });
settings.watch('minecraft', ev => {
if(ev.detail.initial && ev.detail.value === 'no')
return;
soundCtx.library.play((() => {
if(ev.detail.initial)
return 'minecraft:nether:enter';
if(ev.detail.value === 'yes')
return 'minecraft:door:open';
if(ev.detail.value === 'old')
return 'minecraft:door:open-old';
return soundCtx.pack.getEventSound('join');
})());
});
settings.watch('enableNotifications', ev => {
if(!ev.detail.value || !('Notification' in window)
|| (Notification.permission === 'granted' && Notification.permission !== 'denied'))
return;
Notification.requestPermission()
.then(perm => {
if(perm !== 'granted')
settings.set('enableNotifications', false);
});
});
settings.watch('playJokeSounds', ev => {
if(!ev.detail.value) return;
if(!ctx.textTriggers.hasTriggers())
futami.getJson('texttriggers').then(trigInfos => ctx.textTriggers.addTriggers(trigInfos));
});
settings.watch('weeaboo', ev => {
if(ev.detail.value) Weeaboo.init();
});
settings.watch('osuKeysV2', ev => {
// migrate old value
if(ev.detail.initial) {
if(settings.has('osuKeys')) {
settings.set('osuKeysV2', settings.get('osuKeys') ? 'yes' : 'no');
settings.delete('osuKeys');
return;
}
}
OsuKeys.setEnable(ev.detail.value !== 'no');
OsuKeys.setRandomRate(ev.detail.value === 'rng');
});
loadingOverlay.setMessage('Building menus...');
MamiCompat('Umi.Parser.SockChatBBcode.EmbedStub', { value: () => {} }); // intentionally a no-op
MamiCompat('Umi.UI.View.SetText', { value: text => console.log(`Umi.UI.View.SetText(text: ${text})`) });
MamiCompat('Umi.UI.Menus.Add', { value: (baseId, title, initiallyHidden) => console.log(`Umi.UI.Menus.Add(baseId: ${baseId}, title: ${title}, initiallyHidden: ${initiallyHidden})`) });
MamiCompat('Umi.UI.Menus.Get', { value: (baseId, icon) => console.log(`Umi.UI.Menus.Get(baseId: ${baseId}, icon: ${icon})`) });
Umi.UI.Menus.Add('users', 'Users');
Umi.UI.Menus.Add('channels', 'Channels', !settings.get('showChannelList'));
Umi.UI.Menus.Add('settings', 'Settings');
let sidebarAnimation = null;
Umi.UI.Settings.Init();
Umi.UI.Toggles.Add('menu-toggle', {
'click': function() {
const sidebar = $c('sidebar')[0];
const toggle = Umi.UI.Toggles.Get('menu-toggle');
const toggleOpened = 'sidebar__selector-mode--menu-toggle-opened';
const toggleClosed = 'sidebar__selector-mode--menu-toggle-closed';
const isClosed = toggle.classList.contains(toggleClosed);
if(sidebarAnimation !== null) {
sidebarAnimation.cancel();
sidebarAnimation = null;
}
if(isClosed) {
toggle.classList.add(toggleOpened);
toggle.classList.remove(toggleClosed);
} else {
toggle.classList.add(toggleClosed);
toggle.classList.remove(toggleOpened);
}
let update;
if(isClosed)
update = function(t) {
sidebar.style.width = (40 + (220 * t)).toString() + 'px';
};
else
update = function(t) {
sidebar.style.width = (260 - (220 * t)).toString() + 'px';
};
sidebarAnimation = MamiAnimate({
duration: 500,
easing: 'outExpo',
update: update,
});
}
}, 'Toggle Sidebar');
Umi.UI.Toggles.Get('menu-toggle').classList.add('sidebar__selector-mode--menu-toggle-opened');
Umi.UI.Toggles.Add('scroll', {
'click': function() {
settings.toggle('autoScroll');
}
}, 'Autoscroll');
settings.watch('autoScroll', ev => {
Umi.UI.Toggles.Get('scroll').classList.toggle('sidebar__selector-mode--scroll-off', !ev.detail.value);
});
if(window.innerWidth < 768)
Umi.UI.Toggles.Get('menu-toggle').click();
Umi.UI.Toggles.Add('audio', {
'click': function() {
settings.toggle('soundEnable');
}
}, 'Sounds');
settings.watch('soundEnable', ev => {
Umi.UI.Toggles.Get('audio').classList.toggle('sidebar__selector-mode--audio-off', !ev.detail.value);
});
Umi.UI.Toggles.Add('unembed', {
'click': function() {
const buttons = $qa('[data-embed="1"]');
for(const button of buttons)
button.click();
}
}, 'Unembed any embedded media');
Umi.UI.Toggles.Add('clear', {
'click': function() {
if(confirm('ARE YOU SURE ABOUT THAT???')) {
const limit = settings.get('explosionRadius');
const explode = $e({
tag: 'img',
attrs: {
src: '//static.flash.moe/images/explode.gif',
alt: '',
style: {
position: 'absolute',
zIndex: 9001,
bottom: 0,
right: 0,
pointerEvents: 'none',
},
onLoad: function() {
setTimeout(function(){
$r(explode);
}, 1700);
soundCtx.library.play('misc:explode');
},
},
});
document.body.appendChild(explode);
let backLog = Umi.Messages.All();
backLog = backLog.slice(Math.max(backLog.length - limit, 0));
Umi.Messages.Clear();
for(const blMsg of backLog)
Umi.Messages.Add(blMsg);
}
}
}, 'Clear Logs');
const pingIndicator = new MamiPingIndicator;
const pingToggle = Umi.UI.Toggles.Add('ping', {
click: () => alert(pingToggle.title),
}, 'Ready~');
pingToggle.appendChild(pingIndicator.getElement());
if(ctx.eeprom !== undefined) {
Umi.UI.Menus.Add('uploads', 'Upload History', !FUTAMI_DEBUG);
const doUpload = async file => {
const uploadEntry = Umi.UI.Uploads.create(file.name);
const uploadTask = ctx.eeprom.create(file);
uploadTask.onProgress(prog => uploadEntry.setProgress(prog.progress));
uploadEntry.addOption('Cancel', () => uploadTask.abort());
try {
const fileInfo = await uploadTask.start();
uploadEntry.hideOptions();
uploadEntry.clearOptions();
uploadEntry.removeProgress();
uploadEntry.addOption('Open', fileInfo.url);
uploadEntry.addOption('Insert', () => Umi.UI.Markup.InsertRaw(insertText, ''));
uploadEntry.addOption('Delete', () => {
ctx.eeprom.delete(fileInfo)
.then(() => uploadEntry.remove())
.catch(ex => {
console.error(ex);
alert(ex);
});
});
let insertText;
if(fileInfo.isImage()) {
insertText = `[img]${fileInfo.url}[/img]`;
uploadEntry.setThumbnail(fileInfo.thumb);
} else if(fileInfo.isAudio()) {
insertText = `[audio]${fileInfo.url}[/audio]`;
uploadEntry.setThumbnail(fileInfo.thumb);
} else if(fileInfo.isVideo()) {
insertText = `[video]${fileInfo.url}[/video]`;
uploadEntry.setThumbnail(fileInfo.thumb);
} else
insertText = location.protocol + fileInfo.url;
if(settings.get('eepromAutoInsert'))
Umi.UI.Markup.InsertRaw(insertText, '');
} catch(ex) {
if(!ex.aborted) {
console.error(ex);
alert(ex);
}
uploadEntry.remove();
}
};
const uploadForm = $e({
tag: 'input',
attrs: {
type: 'file',
multiple: true,
style: { display: 'none' },
onchange: ev => {
for(const file of ev.target.files)
doUpload(file);
},
},
});
document.body.appendChild(uploadForm);
Umi.UI.InputMenus.AddButton('upload', 'Upload', () => uploadForm.click());
$i('umi-msg-text').onpaste = ev => {
if(ev.clipboardData && ev.clipboardData.files.length > 0)
for(const file of ev.clipboardData.files)
doUpload(file);
};
document.body.ondragenter = ev => {
ev.preventDefault();
ev.stopPropagation();
};
document.body.ondragover = ev => {
ev.preventDefault();
ev.stopPropagation();
};
document.body.ondragleave = ev => {
ev.preventDefault();
ev.stopPropagation();
};
document.body.ondrop = ev => {
ev.preventDefault();
ev.stopPropagation();
if(ev.dataTransfer && ev.dataTransfer.files.length > 0)
for(const file of ev.dataTransfer.files) {
if(file.name.slice(-5) === '.mami'
&& confirm('This file appears to be a settings export. Do you want to import it? This will overwrite your existing settings!')) {
(new MamiSettingsBackup(settings)).importFile(file);
return;
}
doUpload(file);
}
};
}
Umi.UI.InputMenus.Add('markup', 'BB Code');
Umi.UI.InputMenus.Add('emotes', 'Emoticons');
window.addEventListener('beforeunload', function(ev) {
if(settings.get('closeTabConfirm')) {
ev.preventDefault();
return ev.returnValue = 'Are you sure you want to close the tab?';
}
ctx.isUnloading = true;
});
// really not sure about all the watchers for the protocol just kinda being Listed here but we'll see i guess
loadingOverlay.setMessage('Connecting...');
const setLoadingOverlay = async (icon, header, message, optional) => {
const currentView = views.current();
if('setIcon' in currentView) {
currentView.setIcon(icon);
currentView.setHeader(header);
currentView.setMessage(message);
return currentView;
}
if(!optional) {
const loading = new Umi.UI.LoadingOverlay(icon, header, message);
await views.push(loading);
}
};
const protoWorker = new MamiWorker(MAMI_PROTO_JS, ctx.events.scopeTo('worker'));
ctx.protoWorker = protoWorker;
const sockChat = new MamiSockChat(protoWorker);
const conMan = new MamiConnectionManager(sockChat, settings, futami.get('servers'), ctx.events.scopeTo('conn'));
ctx.conMan = conMan;
let sockChatRestarting;
const sockChatReconnect = () => {
if(conMan.isActive)
return;
pingToggle.title = 'Reconnecting...';
pingIndicator.setStrength(-1);
const reconManAttempt = ev => {
if(sockChatRestarting || ev.detail.delay > 2000)
setLoadingOverlay('spinner', 'Connecting...', 'Connecting to server...');
};
const reconManFail = ev => {
// this is absolutely disgusting but i really don't care right now sorry
if(sockChatRestarting || ev.detail.delay > 2000)
setLoadingOverlay('unlink', sockChatRestarting ? 'Restarting...' : 'Disconnected', `Attempting to reconnect in ${(ev.detail.delay / 1000).toLocaleString()} seconds...<br><a href="javascript:void(0)" onclick="mami.conMan.force()">Retry now</a>`);
};
const reconManSuccess = () => {
conMan.unwatch('success', reconManSuccess);
conMan.unwatch('attempt', reconManAttempt);
conMan.unwatch('fail', reconManFail);
};
conMan.watch('attempt', reconManAttempt);
conMan.watch('fail', reconManFail);
conMan.watch('success', reconManSuccess);
conMan.start();
};
const sockChatHandlers = new MamiSockChatHandlers(ctx, sockChat, setLoadingOverlay, sockChatReconnect, pingIndicator, pingToggle);
settings.watch('dumpEvents', ev => sockChatHandlers.setDumpEvents(ev.detail.value));
settings.watch('dumpPackets', ev => sockChat.setDumpPackets(ev.detail.value));
sockChatHandlers.register();
const conManAttempt = ev => {
let message = ev.detail.attempt > 2 ? `Attempt ${ev.detail.attempt}...` : 'Connecting to server...';
setLoadingOverlay('spinner', 'Connecting...', message);
};
const conManFail = ev => {
setLoadingOverlay('cross', 'Failed to connect', `Retrying in ${ev.detail.delay / 1000} seconds...`);
};
const conManSuccess = () => {
conMan.unwatch('success', conManSuccess);
conMan.unwatch('attempt', conManAttempt);
conMan.unwatch('fail', conManFail);
};
conMan.watch('success', conManSuccess);
conMan.watch('attempt', conManAttempt);
conMan.watch('fail', conManFail);
let workerStarting = false;
const initWorker = async () => {
if(workerStarting)
return;
workerStarting = true;
if(FUTAMI_DEBUG)
console.info('[proto] initialising worker...');
try {
await protoWorker.connect();
await sockChat.create();
conMan.client = sockChat;
await conMan.start();
} finally {
workerStarting = false;
}
};
protoWorker.watch(':timeout', ev => {
console.warn('worker timeout', ev.detail);
initWorker();
});
window.addEventListener('visibilitychange', () => {
if(document.visibilityState === 'visible') {
protoWorker.ping().catch(ex => {
console.warn('worker died', ex);
initWorker();
});
}
});
await initWorker();
})();