forked from AkkomaGang/akkoma-fe
Rename legacy PleromaFE Chat functionality to "Shout"
This commit is contained in:
parent
7bd18cda64
commit
0604b1d5b7
15 changed files with 52 additions and 53 deletions
|
@ -4,7 +4,7 @@ import Notifications from './components/notifications/notifications.vue'
|
||||||
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
|
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
|
||||||
import FeaturesPanel from './components/features_panel/features_panel.vue'
|
import FeaturesPanel from './components/features_panel/features_panel.vue'
|
||||||
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
|
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
|
||||||
import ChatPanel from './components/chat_panel/chat_panel.vue'
|
import ShoutPanel from './components/shout_panel/shout_panel.vue'
|
||||||
import SettingsModal from './components/settings_modal/settings_modal.vue'
|
import SettingsModal from './components/settings_modal/settings_modal.vue'
|
||||||
import MediaModal from './components/media_modal/media_modal.vue'
|
import MediaModal from './components/media_modal/media_modal.vue'
|
||||||
import SideDrawer from './components/side_drawer/side_drawer.vue'
|
import SideDrawer from './components/side_drawer/side_drawer.vue'
|
||||||
|
@ -26,7 +26,7 @@ export default {
|
||||||
InstanceSpecificPanel,
|
InstanceSpecificPanel,
|
||||||
FeaturesPanel,
|
FeaturesPanel,
|
||||||
WhoToFollowPanel,
|
WhoToFollowPanel,
|
||||||
ChatPanel,
|
ShoutPanel,
|
||||||
MediaModal,
|
MediaModal,
|
||||||
SideDrawer,
|
SideDrawer,
|
||||||
MobilePostStatusButton,
|
MobilePostStatusButton,
|
||||||
|
@ -65,7 +65,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
chat () { return this.$store.state.chat.channel.state === 'joined' },
|
shout () { return this.$store.state.shout.channel.state === 'joined' },
|
||||||
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
|
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
|
||||||
showInstanceSpecificPanel () {
|
showInstanceSpecificPanel () {
|
||||||
return this.$store.state.instance.showInstanceSpecificPanel &&
|
return this.$store.state.instance.showInstanceSpecificPanel &&
|
||||||
|
|
|
@ -49,10 +49,10 @@
|
||||||
</div>
|
</div>
|
||||||
<media-modal />
|
<media-modal />
|
||||||
</div>
|
</div>
|
||||||
<chat-panel
|
<shout-panel
|
||||||
v-if="currentUser && chat"
|
v-if="currentUser && shout"
|
||||||
:floating="true"
|
:floating="true"
|
||||||
class="floating-chat mobile-hidden"
|
class="floating-shout mobile-hidden"
|
||||||
/>
|
/>
|
||||||
<MobilePostStatusButton />
|
<MobilePostStatusButton />
|
||||||
<UserReportingModal />
|
<UserReportingModal />
|
||||||
|
|
|
@ -240,7 +240,7 @@ const getNodeInfo = async ({ store }) => {
|
||||||
store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
|
store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
|
||||||
store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
|
store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
|
||||||
store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
|
store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
|
||||||
store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
|
store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('shout') })
|
||||||
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
|
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
|
||||||
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
|
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
|
||||||
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
|
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
|
||||||
|
|
|
@ -16,7 +16,7 @@ import FollowRequests from 'components/follow_requests/follow_requests.vue'
|
||||||
import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
|
import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
|
||||||
import Notifications from 'components/notifications/notifications.vue'
|
import Notifications from 'components/notifications/notifications.vue'
|
||||||
import AuthForm from 'components/auth_form/auth_form.js'
|
import AuthForm from 'components/auth_form/auth_form.js'
|
||||||
import ChatPanel from 'components/chat_panel/chat_panel.vue'
|
import ShoutPanel from 'components/shout_panel/shout_panel.vue'
|
||||||
import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
|
import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
|
||||||
import About from 'components/about/about.vue'
|
import About from 'components/about/about.vue'
|
||||||
import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
|
import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
|
||||||
|
@ -64,7 +64,7 @@ export default (store) => {
|
||||||
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
|
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
|
||||||
{ name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
|
{ name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
|
||||||
{ name: 'login', path: '/login', component: AuthForm },
|
{ name: 'login', path: '/login', component: AuthForm },
|
||||||
{ name: 'chat-panel', path: '/chat-panel', component: ChatPanel, props: () => ({ floating: false }) },
|
{ name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
|
||||||
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
|
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
|
||||||
{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
|
{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
|
||||||
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
|
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
|
||||||
|
|
|
@ -2,7 +2,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
|
||||||
|
|
||||||
const FeaturesPanel = {
|
const FeaturesPanel = {
|
||||||
computed: {
|
computed: {
|
||||||
chat: function () { return this.$store.state.instance.chatAvailable },
|
shout: function () { return this.$store.state.instance.shoutAvailable },
|
||||||
pleromaChatMessages: function () { return this.$store.state.instance.pleromaChatMessagesAvailable },
|
pleromaChatMessages: function () { return this.$store.state.instance.pleromaChatMessagesAvailable },
|
||||||
gopher: function () { return this.$store.state.instance.gopherAvailable },
|
gopher: function () { return this.$store.state.instance.gopherAvailable },
|
||||||
whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
|
whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
|
||||||
|
|
|
@ -8,8 +8,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body features-panel">
|
<div class="panel-body features-panel">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-if="chat">
|
<li v-if="shout">
|
||||||
{{ $t('features_panel.chat') }}
|
{{ $t('features_panel.shout') }}
|
||||||
</li>
|
</li>
|
||||||
<li v-if="pleromaChatMessages">
|
<li v-if="pleromaChatMessages">
|
||||||
{{ $t('features_panel.pleroma_chat_messages') }}
|
{{ $t('features_panel.pleroma_chat_messages') }}
|
||||||
|
|
|
@ -10,7 +10,7 @@ library.add(
|
||||||
faTimes
|
faTimes
|
||||||
)
|
)
|
||||||
|
|
||||||
const chatPanel = {
|
const shoutPanel = {
|
||||||
props: [ 'floating' ],
|
props: [ 'floating' ],
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
@ -21,12 +21,12 @@ const chatPanel = {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
messages () {
|
messages () {
|
||||||
return this.$store.state.chat.messages
|
return this.$store.state.shout.messages
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
submit (message) {
|
submit (message) {
|
||||||
this.$store.state.chat.channel.push('new_msg', { text: message }, 10000)
|
this.$store.state.shout.channel.push('new_msg', { text: message }, 10000)
|
||||||
this.currentMessage = ''
|
this.currentMessage = ''
|
||||||
},
|
},
|
||||||
togglePanel () {
|
togglePanel () {
|
||||||
|
@ -50,4 +50,4 @@ const chatPanel = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default chatPanel
|
export default shoutPanel
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="!collapsed || !floating"
|
v-if="!collapsed || !floating"
|
||||||
class="chat-panel"
|
class="shout-panel"
|
||||||
>
|
>
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div
|
<div
|
||||||
class="panel-heading timeline-heading"
|
class="panel-heading timeline-heading"
|
||||||
:class="{ 'chat-heading': floating }"
|
:class="{ 'shout-heading': floating }"
|
||||||
@click.stop.prevent="togglePanel"
|
@click.stop.prevent="togglePanel"
|
||||||
>
|
>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
@ -18,33 +18,33 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-window">
|
<div class="shout-window">
|
||||||
<div
|
<div
|
||||||
v-for="message in messages"
|
v-for="message in messages"
|
||||||
:key="message.id"
|
:key="message.id"
|
||||||
class="chat-message"
|
class="shout-message"
|
||||||
>
|
>
|
||||||
<span class="chat-avatar">
|
<span class="shout-avatar">
|
||||||
<img :src="message.author.avatar">
|
<img :src="message.author.avatar">
|
||||||
</span>
|
</span>
|
||||||
<div class="chat-content">
|
<div class="shout-content">
|
||||||
<router-link
|
<router-link
|
||||||
class="chat-name"
|
class="shout-name"
|
||||||
:to="userProfileLink(message.author)"
|
:to="userProfileLink(message.author)"
|
||||||
>
|
>
|
||||||
{{ message.author.username }}
|
{{ message.author.username }}
|
||||||
</router-link>
|
</router-link>
|
||||||
<br>
|
<br>
|
||||||
<span class="chat-text">
|
<span class="shout-text">
|
||||||
{{ message.text }}
|
{{ message.text }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-input">
|
<div class="shout-input">
|
||||||
<textarea
|
<textarea
|
||||||
v-model="currentMessage"
|
v-model="currentMessage"
|
||||||
class="chat-input-textarea"
|
class="shout-input-textarea"
|
||||||
rows="1"
|
rows="1"
|
||||||
@keyup.enter="submit(currentMessage)"
|
@keyup.enter="submit(currentMessage)"
|
||||||
/>
|
/>
|
||||||
|
@ -53,11 +53,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
class="chat-panel"
|
class="shout-panel"
|
||||||
>
|
>
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div
|
<div
|
||||||
class="panel-heading stub timeline-heading chat-heading"
|
class="panel-heading stub timeline-heading shout-heading"
|
||||||
@click.stop.prevent="togglePanel"
|
@click.stop.prevent="togglePanel"
|
||||||
>
|
>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
@ -72,12 +72,12 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script src="./chat_panel.js"></script>
|
<script src="./shout_panel.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
.floating-chat {
|
.floating-shout {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
|
@ -85,8 +85,8 @@
|
||||||
max-width: 25em;
|
max-width: 25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-panel {
|
.shout-panel {
|
||||||
.chat-heading {
|
.shout-heading {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
@ -102,22 +102,22 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-window {
|
.shout-window {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
max-height: 20em;
|
max-height: 20em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-window-container {
|
.shout-window-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-message {
|
.shout-message {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0.2em 0.5em
|
padding: 0.2em 0.5em
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-avatar {
|
.shout-avatar {
|
||||||
img {
|
img {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
|
@ -128,7 +128,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input {
|
.shout-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
textarea {
|
textarea {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
@ -138,7 +138,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-panel {
|
.shout-panel {
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
|
@ -49,7 +49,7 @@ const SideDrawer = {
|
||||||
currentUser () {
|
currentUser () {
|
||||||
return this.$store.state.users.currentUser
|
return this.$store.state.users.currentUser
|
||||||
},
|
},
|
||||||
chat () { return this.$store.state.chat.channel.state === 'joined' },
|
shout () { return this.$store.state.shout.channel.state === 'joined' },
|
||||||
unseenNotifications () {
|
unseenNotifications () {
|
||||||
return unseenNotificationsFromStore(this.$store)
|
return unseenNotificationsFromStore(this.$store)
|
||||||
},
|
},
|
||||||
|
|
|
@ -11,7 +11,7 @@ import statusesModule from './modules/statuses.js'
|
||||||
import usersModule from './modules/users.js'
|
import usersModule from './modules/users.js'
|
||||||
import apiModule from './modules/api.js'
|
import apiModule from './modules/api.js'
|
||||||
import configModule from './modules/config.js'
|
import configModule from './modules/config.js'
|
||||||
import chatModule from './modules/chat.js'
|
import shoutModule from './modules/shout.js'
|
||||||
import oauthModule from './modules/oauth.js'
|
import oauthModule from './modules/oauth.js'
|
||||||
import authFlowModule from './modules/auth_flow.js'
|
import authFlowModule from './modules/auth_flow.js'
|
||||||
import mediaViewerModule from './modules/media_viewer.js'
|
import mediaViewerModule from './modules/media_viewer.js'
|
||||||
|
@ -88,7 +88,7 @@ const persistedStateOptions = {
|
||||||
users: usersModule,
|
users: usersModule,
|
||||||
api: apiModule,
|
api: apiModule,
|
||||||
config: configModule,
|
config: configModule,
|
||||||
chat: chatModule,
|
shout: shoutModule,
|
||||||
oauth: oauthModule,
|
oauth: oauthModule,
|
||||||
authFlow: authFlowModule,
|
authFlow: authFlowModule,
|
||||||
mediaViewer: mediaViewerModule,
|
mediaViewer: mediaViewerModule,
|
||||||
|
|
|
@ -255,12 +255,12 @@ const api = {
|
||||||
initializeSocket ({ dispatch, commit, state, rootState }) {
|
initializeSocket ({ dispatch, commit, state, rootState }) {
|
||||||
// Set up websocket connection
|
// Set up websocket connection
|
||||||
const token = state.wsToken
|
const token = state.wsToken
|
||||||
if (rootState.instance.chatAvailable && typeof token !== 'undefined' && state.socket === null) {
|
if (rootState.instance.shoutAvailable && typeof token !== 'undefined' && state.socket === null) {
|
||||||
const socket = new Socket('/socket', { params: { token } })
|
const socket = new Socket('/socket', { params: { token } })
|
||||||
socket.connect()
|
socket.connect()
|
||||||
|
|
||||||
commit('setSocket', socket)
|
commit('setSocket', socket)
|
||||||
dispatch('initializeChat', socket)
|
dispatch('initializeShout', socket)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
disconnectFromSocket ({ commit, state }) {
|
disconnectFromSocket ({ commit, state }) {
|
||||||
|
|
|
@ -19,7 +19,7 @@ const defaultState = {
|
||||||
defaultBanner: '/images/banner.png',
|
defaultBanner: '/images/banner.png',
|
||||||
background: '/static/aurora_borealis.jpg',
|
background: '/static/aurora_borealis.jpg',
|
||||||
collapseMessageWithSubject: false,
|
collapseMessageWithSubject: false,
|
||||||
disableChat: false,
|
disableShout: false,
|
||||||
greentext: false,
|
greentext: false,
|
||||||
hideFilteredStatuses: false,
|
hideFilteredStatuses: false,
|
||||||
hideMutedPosts: false,
|
hideMutedPosts: false,
|
||||||
|
@ -57,7 +57,7 @@ const defaultState = {
|
||||||
knownDomains: [],
|
knownDomains: [],
|
||||||
|
|
||||||
// Feature-set, apparently, not everything here is reported...
|
// Feature-set, apparently, not everything here is reported...
|
||||||
chatAvailable: false,
|
shoutAvailable: false,
|
||||||
pleromaChatMessagesAvailable: false,
|
pleromaChatMessagesAvailable: false,
|
||||||
gopherAvailable: false,
|
gopherAvailable: false,
|
||||||
mediaProxyAvailable: false,
|
mediaProxyAvailable: false,
|
||||||
|
@ -107,7 +107,7 @@ const instance = {
|
||||||
case 'name':
|
case 'name':
|
||||||
dispatch('setPageTitle')
|
dispatch('setPageTitle')
|
||||||
break
|
break
|
||||||
case 'chatAvailable':
|
case 'shoutAvailable':
|
||||||
if (value) {
|
if (value) {
|
||||||
dispatch('initializeSocket')
|
dispatch('initializeSocket')
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
const chat = {
|
const shout = {
|
||||||
state: {
|
state: {
|
||||||
messages: [],
|
messages: [],
|
||||||
channel: { state: '' }
|
channel: { state: '' }
|
||||||
|
@ -16,9 +16,8 @@ const chat = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
initializeChat (store, socket) {
|
initializeShout (store, socket) {
|
||||||
const channel = socket.channel('chat:public')
|
const channel = socket.channel('shout:public')
|
||||||
|
|
||||||
channel.on('new_msg', (msg) => {
|
channel.on('new_msg', (msg) => {
|
||||||
store.commit('addMessage', msg)
|
store.commit('addMessage', msg)
|
||||||
})
|
})
|
||||||
|
@ -31,4 +30,4 @@ const chat = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default chat
|
export default shout
|
|
@ -531,7 +531,7 @@ const users = {
|
||||||
if (user.token) {
|
if (user.token) {
|
||||||
store.dispatch('setWsToken', user.token)
|
store.dispatch('setWsToken', user.token)
|
||||||
|
|
||||||
// Initialize the chat socket.
|
// Initialize the shout socket.
|
||||||
store.dispatch('initializeSocket')
|
store.dispatch('initializeSocket')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
"alwaysShowSubjectInput": true,
|
"alwaysShowSubjectInput": true,
|
||||||
"background": "/static/aurora_borealis.jpg",
|
"background": "/static/aurora_borealis.jpg",
|
||||||
"collapseMessageWithSubject": false,
|
"collapseMessageWithSubject": false,
|
||||||
"disableChat": false,
|
"disableShout": false,
|
||||||
"greentext": false,
|
"greentext": false,
|
||||||
"hideFilteredStatuses": false,
|
"hideFilteredStatuses": false,
|
||||||
"hideMutedPosts": false,
|
"hideMutedPosts": false,
|
||||||
|
|
Loading…
Reference in a new issue