commit
b67c506062
@ -0,0 +1,21 @@
|
||||
const chat = {
|
||||
data () {
|
||||
return {
|
||||
currentMessage: '',
|
||||
channel: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
messages () {
|
||||
return this.$store.state.chat.messages
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit (message) {
|
||||
this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
|
||||
this.currentMessage = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default chat
|
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="chat-panel panel panel-default">
|
||||
<div class="panel-heading timeline-heading base02-background base04">
|
||||
<div class="title">
|
||||
{{$t('chat.title')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body base01-background">
|
||||
<div class="chat-window">
|
||||
<div class="chat-message" v-for="message in messages" :key="message.id">
|
||||
<span class="chat-avatar">
|
||||
<img :src="message.author.avatar" />
|
||||
{{message.author.username}}:
|
||||
</span>
|
||||
<span class="chat-text">
|
||||
{{message.text}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-input">
|
||||
<form @submit.prevent="submit(currentMessage)">
|
||||
<input v-model="currentMessage" type="text" >
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./chat.js"></script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.chat-window {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.chat-message {
|
||||
padding: 0.2em 0.5em
|
||||
}
|
||||
.chat-avatar {
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 5px;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
.chat-input {
|
||||
display: flex;
|
||||
form {
|
||||
flex: auto;
|
||||
input {
|
||||
margin: 0.5em;
|
||||
width: fill-available;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,64 @@
|
||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
||||
|
||||
export default {
|
||||
props: [ 'user', 'switcher' ],
|
||||
computed: {
|
||||
headingStyle () {
|
||||
const color = this.$store.state.config.colors['base00']
|
||||
if (color) {
|
||||
const rgb = hex2rgb(color)
|
||||
console.log(rgb)
|
||||
return {
|
||||
backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
|
||||
backgroundImage: `url(${this.user.cover_photo})`
|
||||
}
|
||||
}
|
||||
},
|
||||
bodyStyle () {
|
||||
return {
|
||||
background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
|
||||
}
|
||||
},
|
||||
isOtherUser () {
|
||||
return this.user.id !== this.$store.state.users.currentUser.id
|
||||
},
|
||||
loggedIn () {
|
||||
return this.$store.state.users.currentUser
|
||||
},
|
||||
dailyAvg () {
|
||||
const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
|
||||
return Math.round(this.user.statuses_count / days)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
followUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.followUser(this.user.id)
|
||||
.then((followedUser) => store.commit('addNewUsers', [followedUser]))
|
||||
},
|
||||
unfollowUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.unfollowUser(this.user.id)
|
||||
.then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
|
||||
},
|
||||
blockUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.blockUser(this.user.id)
|
||||
.then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
|
||||
},
|
||||
unblockUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.unblockUser(this.user.id)
|
||||
.then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
|
||||
},
|
||||
toggleMute () {
|
||||
const store = this.$store
|
||||
store.commit('setMuted', {user: this.user, muted: !this.user.muted})
|
||||
store.state.api.backendInteractor.setUserMute(this.user)
|
||||
},
|
||||
setProfileView (v) {
|
||||
const store = this.$store
|
||||
store.commit('setProfileView', { v })
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,33 @@
|
||||
const chat = {
|
||||
state: {
|
||||
messages: [],
|
||||
channel: null
|
||||
},
|
||||
mutations: {
|
||||
setChannel (state, channel) {
|
||||
state.channel = channel
|
||||
},
|
||||
addMessage (state, message) {
|
||||
state.messages.push(message)
|
||||
state.messages = state.messages.slice(-19, 20)
|
||||
},
|
||||
setMessages (state, messages) {
|
||||
state.messages = messages.slice(-19, 20)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
initializeChat (store, socket) {
|
||||
const channel = socket.channel('chat:public')
|
||||
channel.on('new_msg', (msg) => {
|
||||
store.commit('addMessage', msg)
|
||||
})
|
||||
channel.on('messages', ({messages}) => {
|
||||
store.commit('setMessages', messages)
|
||||
})
|
||||
channel.join()
|
||||
store.commit('setChannel', channel)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default chat
|
@ -0,0 +1,34 @@
|
||||
import { map } from 'lodash'
|
||||
|
||||
const rgb2hex = (r, g, b) => {
|
||||
[r, g, b] = map([r, g, b], (val) => {
|
||||
val = Math.ceil(val)
|
||||
val = val < 0 ? 0 : val
|
||||
val = val > 255 ? 255 : val
|
||||
return val
|
||||
})
|
||||
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
|
||||
}
|
||||
|
||||
const hex2rgb = (hex) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null
|
||||
}
|
||||
|
||||
const rgbstr2hex = (rgb) => {
|
||||
if (rgb[0] === '#') {
|
||||
return rgb
|
||||
}
|
||||
rgb = rgb.match(/\d+/g)
|
||||
return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
|
||||
}
|
||||
|
||||
export {
|
||||
rgb2hex,
|
||||
hex2rgb,
|
||||
rgbstr2hex
|
||||
}
|
Loading…
Reference in new issue