diff --git a/bbcode/Editor.vue b/bbcode/Editor.vue index 4e51ed5..eaafa46 100644 --- a/bbcode/Editor.vue +++ b/bbcode/Editor.vue @@ -1,11 +1,12 @@ @@ -130,6 +129,7 @@ import Component from 'vue-class-component'; import {Prop, Watch} from 'vue-property-decorator'; import {EditorButton, EditorSelection} from '../bbcode/editor'; + import {isShowing as anyDialogsShown} from '../components/Modal.vue'; import {Keys} from '../keys'; import {BBCodeView, Editor} from './bbcode'; import CommandHelp from './CommandHelp.vue'; @@ -168,23 +168,30 @@ lastSearchInput = 0; messageCount = 0; searchTimer = 0; - windowHeight = window.innerHeight; - resizeHandler = () => { - const messageView = this.$refs['messages']; - if(this.windowHeight - window.innerHeight + messageView.scrollTop + messageView.offsetHeight >= messageView.scrollHeight - 15) - messageView.scrollTop = messageView.scrollHeight - messageView.offsetHeight; - this.windowHeight = window.innerHeight; - } + messageView!: HTMLElement; + resizeHandler!: EventListener; keydownHandler!: EventListener; + keypressHandler!: EventListener; + scrolledDown = true; + scrolledUp = false; - created(): void { + mounted(): void { this.extraButtons = [{ title: 'Help\n\nClick this button for a quick overview of slash commands.', tag: '?', icon: 'fa-question', handler: () => (this.$refs['helpDialog']).show() }]; - window.addEventListener('resize', this.resizeHandler); + window.addEventListener('resize', this.resizeHandler = () => { + if(this.scrolledDown) + this.messageView.scrollTop = this.messageView.scrollHeight - this.messageView.offsetHeight; + this.onMessagesScroll(); + }); + window.addEventListener('keypress', this.keypressHandler = () => { + if(document.getSelection().isCollapsed && !anyDialogsShown && + (document.activeElement === document.body || document.activeElement.tagName === 'A')) + (this.$refs['textBox']).focus(); + }); window.addEventListener('keydown', this.keydownHandler = ((e: KeyboardEvent) => { if(getKey(e) === Keys.KeyF && (e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) { this.showSearch = true; @@ -195,11 +202,13 @@ if(Date.now() - this.lastSearchInput > 500 && this.search !== this.searchInput) this.search = this.searchInput; }, 500); + this.messageView = this.$refs['messages']; } destroyed(): void { window.removeEventListener('resize', this.resizeHandler); window.removeEventListener('keydown', this.keydownHandler); + window.removeEventListener('keypress', this.keypressHandler); clearInterval(this.searchTimer); } @@ -224,29 +233,30 @@ @Watch('conversation') conversationChanged(): void { - (this.$refs['textBox']).focus(); + if(!anyDialogsShown) (this.$refs['textBox']).focus(); + setTimeout(() => this.messageView.scrollTop = this.messageView.scrollHeight - this.messageView.offsetHeight); + this.scrolledDown = true; } @Watch('conversation.messages') messageAdded(newValue: Conversation.Message[]): void { - const messageView = this.$refs['messages']; - if(!this.keepScroll() && newValue.length === this.messageCount) - messageView.scrollTop -= (messageView.firstElementChild).clientHeight; + this.keepScroll(); + if(!this.scrolledDown && newValue.length === this.messageCount) + this.messageView.scrollTop -= (this.messageView.firstElementChild!).clientHeight; this.messageCount = newValue.length; } - keepScroll(): boolean { - const messageView = this.$refs['messages']; - if(messageView.scrollTop + messageView.offsetHeight >= messageView.scrollHeight - 15) { - this.$nextTick(() => setTimeout(() => messageView.scrollTop = messageView.scrollHeight, 0)); - return true; - } - return false; + keepScroll(): void { + if(this.scrolledDown) + this.$nextTick(() => setTimeout(() => this.messageView.scrollTop = this.messageView.scrollHeight, 0)); } onMessagesScroll(): void { - const messageView = this.$refs['messages']; - if(messageView !== undefined && messageView.scrollTop < 50) this.conversation.loadMore(); + if(this.messageView.scrollTop < 50 && !this.scrolledUp) { + this.scrolledUp = true; + this.conversation.loadMore(); + } else this.scrolledUp = false; + this.scrolledDown = this.messageView.scrollTop + this.messageView.offsetHeight >= this.messageView.scrollHeight - 15; } @Watch('conversation.errorText') @@ -378,4 +388,13 @@ } } } + + .chat-info-text { + display:flex; + align-items:center; + flex:1 51%; + @media (max-width: breakpoint-max(xs)) { + flex-basis: 100%; + } + } \ No newline at end of file diff --git a/chat/Logs.vue b/chat/Logs.vue index a50b4d6..35552b3 100644 --- a/chat/Logs.vue +++ b/chat/Logs.vue @@ -38,7 +38,7 @@
@@ -47,7 +47,7 @@ class="fa fa-download"> -
+
@@ -102,6 +102,7 @@ selectedCharacter = core.connection.character; showFilters = true; canZip = core.logs.canZip; + dateOffset = -1; get filteredMessages(): ReadonlyArray { if(this.filter.length === 0) return this.messages; @@ -139,9 +140,16 @@ this.dates = this.selectedConversation === null ? [] : (await core.logs.getLogDates(this.selectedCharacter, this.selectedConversation.key)).slice().reverse(); this.selectedDate = null; + this.dateOffset = -1; + this.filter = ''; await this.loadMessages(); } + @Watch('filter') + onFilterChanged(): void { + this.$nextTick(async() => this.onMessagesScroll()); + } + download(file: string, logs: string): void { const a = document.createElement('a'); a.href = logs; @@ -189,6 +197,8 @@ if(this.selectedCharacter !== '') { this.conversations = (await core.logs.getConversations(this.selectedCharacter)).slice(); this.conversations.sort((x, y) => (x.name < y.name ? -1 : (x.name > y.name ? 1 : 0))); + this.dates = this.selectedConversation === null ? [] : + (await core.logs.getLogDates(this.selectedCharacter, this.selectedConversation.key)).slice().reverse(); await this.loadMessages(); } this.keyDownListener = (e) => { @@ -213,10 +223,33 @@ } async loadMessages(): Promise> { - if(this.selectedDate === null || this.selectedConversation === null) + if(this.selectedConversation === null) return this.messages = []; - return this.messages = await core.logs.getLogs(this.selectedCharacter, this.selectedConversation.key, - new Date(this.selectedDate)); + if(this.selectedDate !== null) { + this.dateOffset = -1; + return this.messages = await core.logs.getLogs(this.selectedCharacter, this.selectedConversation.key, + new Date(this.selectedDate)); + } + if(this.dateOffset === -1) { + this.messages = []; + this.dateOffset = 0; + } + this.$nextTick(async() => this.onMessagesScroll()); + return this.messages; + } + + async onMessagesScroll(): Promise { + const list = this.$refs['messages']; + if(this.selectedConversation === null || this.selectedDate !== null || list === undefined || list.scrollTop > 15 + || !this.dialog.isShown || this.dateOffset >= this.dates.length) return; + const messages = await core.logs.getLogs(this.selectedCharacter, this.selectedConversation.key, + this.dates[this.dateOffset++]); + this.messages = messages.concat(this.messages); + const noOverflow = list.offsetHeight === list.scrollHeight; + this.$nextTick(() => { + if(list.offsetHeight === list.scrollHeight) return this.onMessagesScroll(); + else if(noOverflow) list.scrollTop = list.scrollHeight; + }); } } diff --git a/chat/ManageChannel.vue b/chat/ManageChannel.vue index 07cce05..b9a0020 100644 --- a/chat/ManageChannel.vue +++ b/chat/ManageChannel.vue @@ -1,51 +1,46 @@ \ No newline at end of file diff --git a/chat/SettingsView.vue b/chat/SettingsView.vue index 103b8fd..514b082 100644 --- a/chat/SettingsView.vue +++ b/chat/SettingsView.vue @@ -47,6 +47,12 @@ {{l('settings.messageSeparators')}}
+
+ +
- -
+ +
{{getByteLength(text)}} / 255
diff --git a/chat/UserMenu.vue b/chat/UserMenu.vue index 3cbc95d..1885b90 100644 --- a/chat/UserMenu.vue +++ b/chat/UserMenu.vue @@ -30,7 +30,7 @@ {{l('user.channelKick')}} {{l('user.chatKick')}} + v-show="isChatOp">{{l('user.chatKick')}}
{{getByteLength(memo)}} / 1000
diff --git a/chat/assets/ic_notification.png b/chat/assets/ic_notification.png new file mode 100644 index 0000000..fd718db Binary files /dev/null and b/chat/assets/ic_notification.png differ diff --git a/chat/common.ts b/chat/common.ts index 1eacc77..851056c 100644 --- a/chat/common.ts +++ b/chat/common.ts @@ -41,6 +41,7 @@ export class Settings implements ISettings { showNeedsReply = false; enterSend = true; colorBookmarks = false; + bbCodeBar = true; } export class ConversationSettings implements Conversation.Settings { diff --git a/chat/conversations.ts b/chat/conversations.ts index 27ff0a2..6eb0c8b 100644 --- a/chat/conversations.ts +++ b/chat/conversations.ts @@ -152,7 +152,7 @@ class PrivateConversation extends Conversation implements Interfaces.PrivateConv if(message.type !== Interfaces.Message.Type.Event) { if(core.state.settings.logMessages) await core.logs.logMessage(this, message); if(this.settings.notify !== Interfaces.Setting.False && message.sender !== core.characters.ownCharacter) - core.notifications.notify(this, message.sender.name, message.text, characterImage(message.sender.name), 'attention'); + await core.notifications.notify(this, message.sender.name, message.text, characterImage(message.sender.name), 'attention'); if(this !== state.selectedConversation || !state.windowFocused) this.unread = Interfaces.UnreadState.Mention; this.typingStatus = 'clear'; @@ -525,19 +525,21 @@ export default function(this: void): Interfaces.State { const message = createMessage(MessageType.Message, char, decodeHTML(data.message), time); await conversation.addMessage(message); - const words = conversation.settings.highlightWords.map((w) => w.replace(/[^\w]/gi, '\\$&')); + const words = conversation.settings.highlightWords.slice(); if(conversation.settings.defaultHighlights) words.push(...core.state.settings.highlightWords); if(conversation.settings.highlight === Interfaces.Setting.Default && core.state.settings.highlight || conversation.settings.highlight === Interfaces.Setting.True) words.push(core.connection.character); + for(let i = 0; i < words.length; ++i) + words[i] = words[i].replace(/[^\w]/gi, '\\$&'); //tslint:disable-next-line:no-null-keyword const results = words.length > 0 ? message.text.match(new RegExp(`\\b(${words.join('|')})\\b`, 'i')) : null; if(results !== null) { - core.notifications.notify(conversation, data.character, l('chat.highlight', results[0], conversation.name, message.text), + await core.notifications.notify(conversation, data.character, l('chat.highlight', results[0], conversation.name, message.text), characterImage(data.character), 'attention'); if(conversation !== state.selectedConversation || !state.windowFocused) conversation.unread = Interfaces.UnreadState.Mention; message.isHighlight = true; } else if(conversation.settings.notify === Interfaces.Setting.True) { - core.notifications.notify(conversation, conversation.name, messageToString(message), + await core.notifications.notify(conversation, conversation.name, messageToString(message), characterImage(data.character), 'attention'); if(conversation !== state.selectedConversation || !state.windowFocused) conversation.unread = Interfaces.UnreadState.Mention; } @@ -565,7 +567,7 @@ export default function(this: void): Interfaces.State { if(conversation === undefined) return core.channels.leave(channel); if(sender.isIgnored && !isOp(conversation)) return; if(data.type === 'bottle' && data.target === core.connection.character) { - core.notifications.notify(conversation, conversation.name, messageToString(message), + await core.notifications.notify(conversation, conversation.name, messageToString(message), characterImage(data.character), 'attention'); if(conversation !== state.selectedConversation || !state.windowFocused) conversation.unread = Interfaces.UnreadState.Mention; @@ -648,13 +650,13 @@ export default function(this: void): Interfaces.State { url += `newspost/${data.target_id}/#Comment${data.id}`; break; case 'bugreport': - url += `view_bugreport.php?id=/${data.target_id}/#${data.id}`; + url += `view_bugreport.php?id=${data.target_id}/#${data.id}`; break; case 'changelog': - url += `log.php?id=/${data.target_id}/#${data.id}`; + url += `log.php?id=${data.target_id}/#${data.id}`; break; case 'feature': - url += `vote.php?id=/${data.target_id}/#${data.id}`; + url += `vote.php?id=${data.target_id}/#${data.id}`; } const key = `events.rtbComment${(data.parent_id !== 0 ? 'Reply' : '')}`; text = l(key, `[user]${data.name}[/user]`, l(`events.rtbComment_${data.target_type}`), `[url=${url}]${data.target}[/url]`); @@ -691,7 +693,7 @@ export default function(this: void): Interfaces.State { } await addEventMessage(new EventMessage(text, time)); if(data.type === 'note') - core.notifications.notify(state.consoleTab, character, text, characterImage(character), 'newnote'); + await core.notifications.notify(state.consoleTab, character, text, characterImage(character), 'newnote'); }); type SFCMessage = (Interfaces.Message & {sfc: Connection.ServerCommands['SFC'] & {confirmed?: true}}); const sfcList: SFCMessage[] = []; @@ -699,7 +701,8 @@ export default function(this: void): Interfaces.State { let text: string, message: Interfaces.Message; if(data.action === 'report') { text = l('events.report', `[user]${data.character}[/user]`, decodeHTML(data.tab), decodeHTML(data.report)); - core.notifications.notify(state.consoleTab, data.character, text, characterImage(data.character), 'modalert'); + if(!data.old) + await core.notifications.notify(state.consoleTab, data.character, text, characterImage(data.character), 'modalert'); message = new EventMessage(text, time); safeAddMessage(sfcList, message, 500); (message).sfc = data; diff --git a/chat/interfaces.ts b/chat/interfaces.ts index 096b96c..a9be8e5 100644 --- a/chat/interfaces.ts +++ b/chat/interfaces.ts @@ -172,6 +172,7 @@ export namespace Settings { readonly showNeedsReply: boolean; readonly enterSend: boolean; readonly colorBookmarks: boolean; + readonly bbCodeBar: boolean; } } @@ -179,9 +180,10 @@ export type Settings = Settings.Settings; export interface Notifications { isInBackground: boolean - notify(conversation: Conversation, title: string, body: string, icon: string, sound: string): void - playSound(sound: string): void + notify(conversation: Conversation, title: string, body: string, icon: string, sound: string): Promise + playSound(sound: string): Promise requestPermission(): Promise + initSounds(sounds: ReadonlyArray): Promise } export interface State { diff --git a/chat/localize.ts b/chat/localize.ts index 3b2d89f..6ef970a 100644 --- a/chat/localize.ts +++ b/chat/localize.ts @@ -86,7 +86,7 @@ const strings: {[key: string]: string | undefined} = { 'logs.date': 'Date', 'logs.selectCharacter': 'Select a character...', 'logs.selectConversation': 'Select a conversation...', - 'logs.selectDate': 'Select a date...', + 'logs.allDates': 'Show all', 'user.profile': 'Profile', 'user.message': 'Open conversation', 'user.messageJump': 'View conversation', @@ -172,6 +172,7 @@ Current log location: {1}`, 'settings.defaultHighlights': 'Use global highlight words', 'settings.colorBookmarks': 'Show friends/bookmarks in a different colour', 'settings.beta': 'Opt-in to test unstable prerelease updates', + 'settings.bbCodeBar': 'Show BBCode formatting bar', 'fixLogs.action': 'Fix corrupted logs', 'fixLogs.text': `There are a few reason log files can become corrupted - log files from old versions with bugs that have since been fixed or incomplete file operations caused by computer crashes are the most common. If one of your log files is corrupted, you may get an "Unknown Type" error when you log in or when you open a specific tab. You may also experience other issues. @@ -182,6 +183,7 @@ Once this process has started, do not interrupt it or your logs will get corrupt 'fixLogs.success': 'Your logs have been fixed. If you experience any more issues, please ask in for further assistance in the Helpdesk channel.', 'conversationSettings.title': 'Tab Settings', 'conversationSettings.action': 'Edit settings for {0}', + 'conversationSettings.save': 'Save settings', 'conversationSettings.default': 'Default', 'conversationSettings.true': 'Yes', 'conversationSettings.false': 'No', @@ -286,7 +288,7 @@ Once this process has started, do not interrupt it or your logs will get corrupt 'commands.status': 'Set status', 'commands.status.help': 'Sets your status along with an optional message.', 'commands.status.param0': 'Status', - 'commands.status.param0.help': 'A valid status, namely "online", "busy", "looking", "away", "dnd" or "busy".', + 'commands.status.param0.help': 'A valid status, namely "online", "busy", "looking", "away" or "dnd".', 'commands.status.param1': 'Message', 'commands.status.param1.help': 'An optional status message of up to 255 bytes.', 'commands.priv': 'Open conversation', diff --git a/chat/notifications.ts b/chat/notifications.ts index c2a3c58..a15a07d 100644 --- a/chat/notifications.ts +++ b/chat/notifications.ts @@ -11,26 +11,45 @@ export default class Notifications implements Interface { conversation !== core.conversations.selectedConversation || core.state.settings.alwaysNotify); } - notify(conversation: Conversation, title: string, body: string, icon: string, sound: string): void { + async notify(conversation: Conversation, title: string, body: string, icon: string, sound: string): Promise { if(!this.shouldNotify(conversation)) return; - this.playSound(sound); - if(core.state.settings.notifications) { - /*tslint:disable-next-line:no-object-literal-type-assertion*///false positive - const notification = new Notification(title, {body, icon, silent: true}); + await this.playSound(sound); + if(core.state.settings.notifications && (Notification).permission === 'granted') { //tslint:disable-line:no-any + const notification = new Notification(title, this.getOptions(conversation, body, icon)); notification.onclick = () => { conversation.show(); window.focus(); notification.close(); }; + window.setTimeout(() => { + notification.close(); + }, 5000); } } - playSound(sound: string): void { + getOptions(conversation: Conversation, body: string, icon: string): + NotificationOptions & {badge: string, silent: boolean, renotify: boolean} { + const badge = require(`./assets/ic_notification.png`); //tslint:disable-line:no-require-imports + return { + body, icon: core.state.settings.showAvatars ? icon : undefined, badge, silent: true, data: {key: conversation.key}, + tag: conversation.key, renotify: true + }; + } + + async playSound(sound: string): Promise { if(!core.state.settings.playSound) return; - const id = `soundplayer-${sound}`; - let audio = document.getElementById(id); - if(audio === null) { - audio = document.createElement('audio'); + const audio = document.getElementById(`soundplayer-${sound}`); + audio.volume = 1; + audio.muted = false; + return audio.play(); + } + + initSounds(sounds: ReadonlyArray): Promise { //tslint:disable-line:promise-function-async + const promises = []; + for(const sound of sounds) { + const id = `soundplayer-${sound}`; + if(document.getElementById(id) !== null) continue; + const audio = document.createElement('audio'); audio.id = id; for(const name in codecs) { const src = document.createElement('source'); @@ -39,9 +58,14 @@ export default class Notifications implements Interface { src.src = require(`./assets/${sound}.${codecs[name]}`); audio.appendChild(src); } + document.body.appendChild(audio); + audio.volume = 0; + audio.muted = true; + const promise = audio.play(); + if(promise instanceof Promise) + promises.push(promise); } - //tslint:disable-next-line:no-floating-promises - audio.play(); + return Promise.all(promises); //tslint:disable-line:no-any } async requestPermission(): Promise { diff --git a/chat/profile_api.ts b/chat/profile_api.ts index 09402dd..67c37b4 100644 --- a/chat/profile_api.ts +++ b/chat/profile_api.ts @@ -40,7 +40,7 @@ async function characterData(name: string | undefined): Promise { }; const newKinks: {[key: string]: KinkChoiceFull} = {}; for(const key in data.kinks) - newKinks[key] = (data.kinks[key] === 'fave' ? 'favorite' : data.kinks[key]); + newKinks[key] = (data.kinks[key] === 'fave' ? 'favorite' : data.kinks[key]); const newCustoms: CharacterCustom[] = []; for(const key in data.custom_kinks) { const custom = data.custom_kinks[key]; diff --git a/chat/slash_commands.ts b/chat/slash_commands.ts index 82187df..0bc307c 100644 --- a/chat/slash_commands.ts +++ b/chat/slash_commands.ts @@ -281,18 +281,12 @@ const commands: {readonly [key: string]: Command | undefined} = { params: [{type: ParamType.Character}] }, closeroom: { - exec: (conv: ChannelConversation) => { - core.connection.send('RST', {channel: conv.channel.id, status: 'private'}); - core.connection.send('ORS'); - }, + exec: (conv: ChannelConversation) => core.connection.send('RST', {channel: conv.channel.id, status: 'private'}), permission: Permission.RoomOwner, context: CommandContext.Channel }, openroom: { - exec: (conv: ChannelConversation) => { - core.connection.send('RST', {channel: conv.channel.id, status: 'public'}); - core.connection.send('ORS'); - }, + exec: (conv: ChannelConversation) => core.connection.send('RST', {channel: conv.channel.id, status: 'public'}), permission: Permission.RoomOwner, context: CommandContext.Channel }, diff --git a/components/Dropdown.vue b/components/Dropdown.vue index 1673fb9..47cc6de 100644 --- a/components/Dropdown.vue +++ b/components/Dropdown.vue @@ -1,11 +1,11 @@